vue-router之addRoutes使用遇到的坑

转载

于 2019-04-05 10:11:01 发布 · 2.2w 阅读

42 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ca72913518825664912cba1

文章标签：

#javascript #前端 #后端 #ViewUI

本文记录了在使用vue-router的addRoutes动态添加权限路由时遇到的重复路由名警告问题，分析了问题原因在于未刷新情况下重新登录导致的路由重复。通过深入理解Vue实例和路由初始化，提出了在退出登录时刷新页面或重置router.match的解决方案，强调了解决此类问题的方法和经验教训。

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

最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。

场景复现：
做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是：

前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中，整个过程大致如下：

// router.js 文件

// 需要用户权限的路由表
const appRoutes = [
	{
  	path: '/dashboard',
    name: 'dashboard',
    component: () => import('...'),
    children: [
  		RouteConfig1, 
      RouteConfig2, 
      ...
    ]
  },
  RouteConfig,
  ...
];

// 不需要用户权限的路由表
const constantRoutes = [
  {
  	path: