项目中打算是用后台控制路由的，简单实现了一下后台路由的实现方案。
使用的是 vue2中的 addRoutes 方法，实现的过程中遇到几个问题。
1.浏览器刷新之后，addRoutes添加的路由会丢失
2.组件懒加载的时候，无法识别传进来的字符串变量
这2个问题后面已经解决了，下面先上代码
//******************************************* 后台动态路由 和 调试 方法块 *****************************************************
router.beforeEach(function (to, from, next) {
var dynamicRouterListStr = localStorage.getItem('router');
if (dynamicRouterListStr != null) {
if (store.state.router == null || store.state.router.length == 0) {
var routerList = modalRouterList(JSON.parse(dynamicRouterListStr));
if (! routerList instanceof Array) {
routerList = [];
}
routerList.push( {
path : '*',
redirect : '/error'
}
)
store.commit('setRouter', routerList);
router.addRoutes(routerList);
next({ ...to, replace: true })
}else{
next();
}
}else{
next();
}
});
function modalRouterList(list){
console.log(list)
var tempList = [];
list.forEach(ele => {
var obj = {};
obj['path'] = ele['path'];
obj['name'] = ele['name'];
obj['component'] = (resolve) => require([`@/${ele['source']}.vue`], resolve);
tempList.push(obj);
})
return tempList;
}
//******************************************* 后台动态路由 和 调试 方法块 *****************************************************
解决刷新路由丢失问题
1.从后台获取到路由信息后，把路由信息保存了 localStoreage中，路由每次加载的时候，判断localStoreage信息加载。
2.router.addRoutes是异步的，所以把全局的跳转 *也动态添加了，同时使用 next({ ...to, replace: true })重新载入。
解决组件懒加载字符串问题
image.png
把字符串变量分割开来，require中 用 @ + 变量 + .vue的方式加载即可。
