addroutes刷新_vue-router之解决addRoutes使用遇到的坑

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

场景复现：

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

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

// router.js 文件

// 需要用户权限的路由表

const appRoutes = [

{

path: '/dashboard',

name: 'dashboard',

component: () => import('...'),

children: [

RouteConfig1,

RouteConfig2,

...

]

},

RouteConfig,

...

];

// 不需要用户权限的路由表

const constantRoutes = [

{

path: '/login',

name: 'login',

component: Login

},

{