Vue3“在'vue-router'中找不到导出'createWebHistory，createRouter'

Posted 2023-02-22

【中文标题】Vue3“在\'vue-router\'中找不到导出\'createWebHistory，createRouter\'

【英文标题】：Vue3 "export 'createWebHistory, createRouter' was not found in 'vue-router'Vue3“在'vue-router'中找不到导出'createWebHistory，createRouter'

【发布时间】：2021-04-19 17:56:22

【问题描述】：

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

我收到以下内容

错误：未捕获的 TypeError：Object(...) 不是函数

在控制台中：

./src/router/index.js 中的警告“未找到导出‘createRouter’ 在'vue-router'中

./src/router/index.js 中的警告“export 'createWebHistory' 不是 在'vue-router'中找到

路由器 -> index.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;

【参考方案1】：

在这里找到答案：

*** question

你需要通过npm安装路由器

npm install vue-router@next --save

【讨论】：

我的问题是我错误地使用了vue-router 而不是vue-router@next。