我正在创建一个Vue3应用程序,在添加路由后,我的第一个页面正在加载,但它完全是空白的.

我收到以下消息

错误:未捕获类型错误:对象(…)这不是一个函数

在控制台中:

警告/src/路由/索引.未找到js"导出'createRouter'

警告/src/路由/索引.js"导出'createWebHistory'未被删除"

路由->指数js

import { createWebHistory, createRouter } from "vue-router";
...

const routes = [{
        path: "/user/create",
        name: "createUser",
        component: createUser,
    },
    {
        path: "/users",
        name: "listUser",
        component: listUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/show/:id",
        name: "showUser",
        component: showUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/update/:id",
        name: "updateUser",
        component: updateUser,
    },
    {
        path: "/login",
        name: "login",
        component: Login
    },
    {
        path: "/register",
        name: "register",
        component: Register
    },
    {
        path: "/users/bearer",
        name: "bearer",
        component: bearer,
        meta: { requiresAuth: true }
    }

]

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = firebase.auth().currentUser;
    console.log("isauthenticated", isAuthenticated);
    if (requiresAuth && !isAuthenticated) {
        next("/login");
    } else {
        next();
    }
});

export default router;

推荐答案

在这里找到了答案:

Stackoverflow question

你需要通过npm安装路由

npm install vue-router@next --save

Vue.js相关问答推荐

Vue路由路径匹配行为

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

复选框列未在vutify中排序

将 html 文件移出 dist vite 中的 src 文件夹

是否可以使用 Vuetify/VueJS 为轮播设置默认图像而不是第一个图像?

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)?

vite - 具有相对assets资源 路径的子页面

如何在 vuejs 中导入和使用本地 .csv 文件

如何使用 vue 或 javascript 向服务器发送密码?

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

ECMA6 中 nameFunction() {} 和 nameFunction () => {} 的区别

单击链接会更改 url,但不会更改页面上的内容/数据

Vue路由保持活动和挂载行为

Vuetify 2 个工具栏和 1 个导航抽屉,navigation drawer导航抽屉上方有 1 个工具栏

有没有办法知道组件实例何时挂载?

嵌套组件

在 Vue 应用程序中创建一个类的单个实例

升级到 vue-cli 3 后,HTML 中的空格消失了

如何将单选按钮绑定到 vuex store ?

Vue-meta:metaInfo 无权访问计算(computed)属性