前言:做了好多权限分配的项目,使用了好多种方式控制,个人感觉使用 addRoutes 来做还是比较好的,使用过程中有几个坑,在此记录一下。
先在路由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,]);