如何使用 vuejs 3 将路由器添加到 @vue/cli 应用程序？

Posted 2023-02-22

【中文标题】如何使用 vuejs 3 将路由器添加到 @vue/cli 应用程序？

【英文标题】：How to add Router to @vue/cli app with vuejs 3?

【发布时间】：2021-02-13 19:57:22

【问题描述】：

学习 vuejs3 我用命令创建了新的@vue/cli 应用

vue create myapp

选择了 vuejs 3 我将路由器添加到我的项目中，并在我的 src/main.js 中添加了路由器引用：

import  createApp  from 'vue'

import  createRouter/*, createWebHistory */  from 'vue-router'
import WelcomeScreen from './pages/WelcomeScreen.vue'
import UsersList from './pages/UsersList.vue'

import App from './App.vue'

const router = createRouter(
  // history: createWebHistory(),
  mode: 'history',
  routes: [
     path: '/', component: WelcomeScreen ,
     path: '/users', component: UsersList 
  ]
)
const app = createApp(App)
app.use(router)

app.mount('#app')

但在控制台中我看到警告：

"export 'createRouter' was not found in 'vue-router'

和错误：

main.js?56d7:10 Uncaught TypeError: Object(...) is not a function

在我的 package.json 中有：

  "dependencies": 
    "core-js": "^3.6.5",
    "mitt": "^2.1.0",
    "vue": "^3.0.0",
    "vue-router": "^3.4.8"
  ,

和

$ vue --version
@vue/cli 4.5.8

哪种方式有效？ 还有一些针对 @vue/cli 的 vuejs3 教程？ 我找到了一些 vuejs 3 教程，但不适用于 @vue/cli，这会引起一些混乱......

在我的@vue/cli 和 vue2 中说我使用文件 src/router/index.js，但我不记得是否 我是手动创建的...

谢谢！

【问题讨论】：

这对你有帮助吗***.com/a/64576169/8172857 ？

请添加版本为“vue-router”的vue-router：“^4.0.0-beta.13”npmjs.com/package/vue-router/v/4.0.0-beta.13

【参考方案1】：

您需要为 vue3 安装这样的 vue-router：

npm install vue-router@next --save

Router.js

import  createApp  from 'vue'
import App from './App.vue'
    import  createRouter, createWebHistory  from "vue-router"
    const routeInfos = [
        
            path : "/",
            component : HomePage
        ,
        
            path : "/favorites",
            component : FavoritesPage
        
    ]
    
    const router = createRouter(
        history : createWebHistory(),
        routes : routeInfos
    )
    
    export default router;

在 Main.js 中导入

import router from "./router"
createApp(App).use(router).mount('#app')

【讨论】：

嗨。我认为您应该再次查看此博客。 vuemastery.com/blog/vue-router-a-tutorial-for-vue-3

【参考方案2】：

我遇到了同样的问题，找到了答案here

//卸载vue2.x vue-router

npm uninstall vue-router --save

// 安装 vue3 vue-router

npm install vue-router@next --save