由于子路由都是动态追加的,当界面刷新的时候,其实我们路由里面并没有该子界面的配置,所以就是404咯,也就是空白咯
在页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加该路由,再进行界面的跳转。
核心代码如下:
var dynamicRouter=null//用来获取后台拿到的路由
var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符
//如果开始跳转
router.beforeEach(function (to, from, next) {
// let routerCache=
let lastUrl=getLastUrl(window.location.href,'/');
let routerUrls=StorageUtils.getSessionItem("routerUrls");
//如果GoingUtils.templateObj["jumpLoadFlag"]为null 则表示是界面刷新
if(AssertUtils.isNotEmpty(routerUrls)&&!AssertUtils.isNotNull(GoingUtils.templateObj["jumpLoadFlag"])){
if(!dynamicRouter){
let routerUrlsAry=routerUrls.split(';');
//如果当前连接在url中存在 则表示该跳转是需要动态加载的
if(ArrayUtils.aryContains(routerUrlsAry,lastUrl)){
dynamicRouter=DynamicRouterUtils.getRouterByUrl(lastUrl,UnitTabSetHomePage,router);
next({ ...to, replace: true })
}
} else {
next();
}
}
//如果是配置了缓存路径的 则进行缓存 如果没有配置缓存则直接跳转
if(routerCache.includes(to.name)||routerCache.includes(to.path)){
to.meta.keepAlive = true;
}else{
to.meta.keepAlive = false;
}
//显示loading提醒
store.commit('updateLoadingStatus', {isLoading: true});
//如果是进入到login界面 相应先查询登录配置信息
if (to.name === "login"||to.name==='loginUrl') {
if (!store.state.vux.loginInfo) {
//加载当前用户的登录界面设计信息
store.dispatch($A('loadCurGroupLoginDes', "LoginStore"), {
backFun: function () {
store.commit('updateLoginState', {});
next()
}
});
} else {
next()
}
} else {
next();
}
})
到此就ok了 ,完成了路由的动态追加,完成了子路由下界面刷新找不到的问题。
当然我项目代码写的比较复杂啊,因为我项目采用的是tabset方式来打开子路由界面,所以还有许多其他不相干的状态和缓存数据。