Vue.js 3 - 为什么在这种情况下导入 vue-router 不起作用？答案

【问题标题】：Vue.js 3 - Why is importing vue-router not working in this case?Vue.js 3 - 为什么在这种情况下导入 vue-router 不起作用？
【发布时间】：2021-03-19 01:45:48
【问题描述】：

我有以下文件

路由器.js

import VueRouter from 'vue-router'

export const router = VueRouter({
routes: [
     {
      ...
     }
 ]
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
...
import { router } from './router'
app.use(router)
...
app.mount('#app')

但是，当我这样做时，我收到以下错误 Uncaught TypeError: this is undefined - vue-router.esm.js:2828 这似乎是 vue-router 库中的一个错误，因为错误发生在第 2828 行。

通过尝试导入 vue-router 而不尝试在应用程序的其他任何地方使用它会发生这种情况，我也使用 vuex 并以相同的方式导入导出/导入存储并且它可以工作。

我的猜测是我错误地导入了 vue-router，因为文档在示例中没有使用 {createApp}。是我导入错误，还是有其他原因它不起作用？

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案1】：

首先确保你已经安装了 vue router 4 使用：

npm install vue-router@next

然后导入createRouter创建路由器实例：

 import { createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
     {
      ...
     }
 ]
})

【讨论】：