How can you properly add vue-router?-CodePudding

When adding vue-router to your Vue application you seem to have many options. I've seen the following:

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)

How do these differ? What is the correct way?

CodePudding user response：

The first two code blocks demonstrate initializing a Vue 2 app with Vue Router 3. However, the exported App component definition in the first code block is normally passed to the Vue constructor (i.e., new Vue({ /* App component definition */ })).

The last code block is demonstrates initializing a Vue 3 app with Vue Router 4.

Note that the combination of Vue Router and Vue versions noted above cannot be intermixed. That is, Vue 2 can only use Vue Router 3; and Vue 3 can only use Vue Router 4.