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

Question

学习 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，但我不记得我是否手动创建...

谢谢！

标签： vue-routervuejs3vue-cli

Answer 1

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

npm install vue-router@next --save

路由器.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')