从 Vue2向Vue3的迁移_vue2转v3-CSDN博客

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126488410

本文介绍了Vue Router从v3到v4（Vue3）迁移时的主要变化，包括new Router变为createRouter，history配置更新，base配置位置变动，以及在Vue3中直接使用imported $router的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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});
    }
}