vue-router里权限控制的方法

先在路由index.js文件里面初始化路由：最后在导出

let vueRouter = new Router(
    {
        routes: []
    }
);
 
 
//在此写动态加载路由的方法，也就是下面的方法
 
 
 
export default vueRouter;

坑：

1：使用vue 动态添加的路由，在页面刷新之后就会消失，所以得做本地存储，检查浏览器是否刷新。
2：使用addRoutes 动态添加的路由，没有删除功能，(自己搜索了很多文档，好像vue官方没有提供删除路由的方法)，所以会导致重复添加，出现bug；比如，用户在同一浏览器窗口，登录多次；或者在项目里面切换了权限，导致上一次的路由还存在。

解决办法：
1）刷新失效问题： 也可以从后台获取路由，然后保存在localStorage，刷新的时候在从localStorage 里面拿出来，本人因为别的原因，是在本地建了两个路由文件// 判断是否刷新

window.onload = function () {
    if (localStorage.getItem('role') == 'student') {  //学生权限
        vueRouter.$addRoutes([...defaultRouter, ...utilsRouter,]);
    } else {
        vueRouter.$addRoutes([...admin, ...utilsRouter,]);
    }
};
，然后按权限分别加载；

2）addRoutes 不能删除问题：
1.首先封装一下vue官方提供addRoutes 方法 ，变为$addRoutes

vueRouter.$addRoutes = (params) => {
    vueRouter.matcher = new Router({mode: 'history'}).matcher;
    vueRouter.addRoutes(params)
};

2.在需要添加的地方直接使用 $addRoutes

vueRouter.$addRoutes([...defaultRouter, ...utilsRouter,]);