如何正确添加 vue-router？

Question

将 vue-router 添加到您的 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

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

最后一个代码块演示了初始化一个Vue 3 app with Vue Router 4。

请注意，上述 Vue Router 和 Vue 版本的组合不能混合使用。即Vue 2只能使用Vue Router 3；而 Vue 3 只能使用 Vue Router 4.

如何正确添加 vue-router？

How can you properly add vue-router?

javascript

vue.js

vue-router