从 Vue2向Vue3的迁移

在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都没有变化，但是在迁移程序时，可能会遇到一些破坏性的变化。

1、new Router 变成 createRouter

Vue Router 不再是一个类，而是一组函数。现在不用再写new Router()，而是要调用createRouter():

Vue2:

import Router from 'vue-router'
 
var router = new Router({
    ...
})

Vue3:

import { createRouter } from 'vue-router'
 
const router = createRouter({
   ...
})

2、新的 history 配置取代 mode

mode:'history'配置已经被一个更灵活的history配置所取代。根据你使用的模式，必须用适当的函数替换它：

• "history" :  createWebHistory()
• "hash" :  createWebHashHistory()
• "abstract" :  createMemoryHistory()

Vue2:

import Router from 'vue-router'
 
var router = new Router({
    mode: 'history',
    routes: []
})

Vue3:

import { createRouter, createWebHistory } from 'vue-router'
// 还有 createWebHashHistory 和 createMemoryHistory
 
createRouter({
  history: createWebHistory(),
  routes: []
})

3、移动了base配置

在Vue3中，base配置被作为createWebHistory(其他 history 也一样)的第一个参数传递：

Vue2:

import Router from 'vue-router'
 
var router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: []
})

Vue3:

import { createRouter, createWebHistory } from 'vue-router'
createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: []
})

4、$router属性

在Vue3中调用$router.push()等属性时，不再需要this指针；

通过调用import router from "@/router"即可直接使用。

Vue2:

methods: {
	show: function (value) {
		this.$router.push({name: value});
	}
}

Vue3:

import router from "@/router";
 
methods:{
    show:function (value){
        router.push({name:value});
    }
}