vue切换用户时，重置路由

最新推荐文章于 2025-05-14 22:14:59 发布

Web_阿凯

最新推荐文章于 2025-05-14 22:14:59 发布

阅读量8.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue-cli3

本文链接：https://blog.youkuaiyun.com/weixin_45122120/article/details/117224413

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了在Vue项目中如何处理后端动态传来的路由，特别是针对不同用户权限导致的菜单错乱问题。通过重置路由的方法，确保在用户切换时能够正确清除并更新动态加载的路由，保持菜单的正确显示。主要涉及Vue Router的使用技巧，包括错误处理和路由守卫。

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

目前路由大多都是后端动态传过来的，不同用户菜单权限会有所不同，在切换用户时，会出现菜单错乱的情况，这时候就需要重置菜单了

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export let routes = [{
        path: '/login',
        name: 'login',
       omponent: () => import('@/views/login/login'),
    }
]
const createRouter = () => new Router({
    routes: routes
})
const router = createRouter()
//写一个重置路由的方法，切换用户后，或者退出时清除动态加载的路由
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // 新路由实例matcer，赋值给旧路由实例的matcher，（相当于replaceRouter）
}
export default router