項(xiàng)目中打算是用后臺(tái)控制路由的，簡單實(shí)現(xiàn)了一下后臺(tái)路由的實(shí)現(xiàn)方案。
使用的是 vue2中的 addRoutes 方法，實(shí)現(xiàn)的過程中遇到幾個(gè)問題。
1.瀏覽器刷新之后，addRoutes添加的路由會(huì)丟失
2.組件懶加載的時(shí)候，無法識(shí)別傳進(jìn)來的字符串變量
這2個(gè)問題后面已經(jīng)解決了，下面先上代碼
//******************************************* 后臺(tái)動(dòng)態(tài)路由 和 調(diào)試 方法塊 *****************************************************
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;
}
//******************************************* 后臺(tái)動(dòng)態(tài)路由 和 調(diào)試 方法塊 *****************************************************
解決刷新路由丟失問題
1.從后臺(tái)獲取到路由信息后，把路由信息保存了 localStoreage中，路由每次加載的時(shí)候，判斷l(xiāng)ocalStoreage信息加載。
2.router.addRoutes是異步的，所以把全局的跳轉(zhuǎn) *也動(dòng)態(tài)添加了，同時(shí)使用 next({ ...to, replace: true })重新載入。
解決組件懶加載字符串問題
image.png
把字符串變量分割開來，require中 用 @ + 變量 + .vue的方式加載即可。
