vue-router之addRoutes使用遇到的坑

本文记录了在使用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: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值