如何正确地添加vue-路由器？

Question

当将Vue -路由器添加到您的Vue应用程序时，您似乎有许多选项。我见过以下情况：

import VueRouter from 'vue-router'

const router = new VueRouter({
  base: '/app',
  mode: 'history',
  routes,
})

export default {
  name: 'App',
  components: {},
  router,
}

或

// /router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  base: '/app',
  mode: 'history',
  routes,
})

或

const router = VueRouter.createRouter({
  base: '/app',
  mode: 'history',
  routes,
})

const app = Vue.createApp({})
app.use(router)

这些有何不同？正确的方法是什么？

Answer 1

前两个代码块演示如何用 app初始化。但是，第一个代码块中导出的App组件定义通常会传递给Vue构造函数(即new Vue({ /* App component definition */ }))。

最后一个代码块演示如何用 app初始化。

请注意，上述Vue路由器和Vue版本的组合不能混用。也就是说，Vue 2只能使用Vue路由器3，而Vue 3只能使用Vue路由器4。