说一说实战项目升级从vue2到vue3 之router_vuerouter.prototype removed-CSDN博客

本文链接：https://blog.csdn.net/weixin_44191425/article/details/122622313

本文介绍了将项目从Vue2升级到Vue3时关于路由和公共组件的处理方法。在Vue2中，路由配置通常放在modules文件夹的各个js文件里，而在Vue3中，路由组件可以直接在文件中封装。对于公共组件，以菜单栏为例，Vue3支持按需引入，简化了引用方式。在路由跳转方面，Vue3中this为undefined，需要使用useRouter来实现。同时，获取当前路由的方式也发生了变化。

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

先附上vue-router 官方文档访问地址https://router.vuejs.org/zh/

router.js

vue2 写法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../layout'
import modules from './modules/require'
Vue.use(VueRouter)
const routes = [{
   
   
    redirect: '/',
    path: '/index',
    name: 'layout',
    component: Layout,
    children: [
      ...modules
    ]
  },
  {
   
   
    path: '/', // 官网
    name: 'home',
    component: () => import('@/views/home')
  }
]

const router = new VueRouter({
   
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // scrollBehavior () {
   
   
  // 浏览器保存记录对象
  // history.pushState(null, null, document.URL)
  // }
})

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
   
   
  return VueRouterPush.call(this, to).catch(err => err)
}

export default router

modules------require.js

const files = require.context('./', false, /\.js$/)
let routerArr = []

files.keys().forEach(item => {
   
   
  if (item !== './require.js') {
   
   
    routerArr = routerArr.concat(files(item).default)
  }
})
export default typeof routerArr[0] === 'undefined' ? '' : routerArr

modules文件夹里面是各个路由的js文件，js里面写的便是改路由
例如：license.js

export default [{
   
   
  path: '/license',
  name: 'license',
  icon: 'license-menu',
  meta: {
   
   
    isMenu: true,
    title: '授权信息',
    active_tab: '/index',
    keepAlive: true,
    roles: [1, 2, 3]
  },
  component: () => import('@/views/license')
}]

Layout 是封装的公共布局，包块但不限于导航栏、菜单栏、个人中心等等。

我们都知道vue-router 有router.beforeEach这样一个全局的路由钩子，在这个方法里面可以做路由拦截个重定向，这个钩子可以在router.js里面写，也可以在main.js里面写，看个人习惯。

// 全局路由钩子
router.beforeEach((to, from, next) => {
  const pathName = to.name
  // 判断该路由是否需要登录权限
  if (pathName)) {
   
   
   
  } else {
   
   
    next() // 确保一定要有next()被调用
    return
  }
})

vue3写法

router.js

import {
   
    createRouter, createWebHistory } from "vue-router";
import BasicLayout from "../layouts/basicLayout.vue";
const routes = [
  {
   
   
    path: "/",
    name: "index",
    meta: {
   
    title: "首页" },
    component: BasicLayout,
    redirect: "/home",
    children: