基于vue 动态菜单 刷新空白问题的解决
1.先确认自己在route.js或者main.js中有没有使用路由守卫vue.beforeEach和vue.addRouters()促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。
代码示范注意点：
//注意：确定自己避免了路由守卫进入死循环
letoneRun=true;//通过oneRun变量控制避免陷入死循环
router.beforeEach((to,from,next)=>{
if(oneRun){
oneRun=false;//必须在creatNewRouter()执行
createNewRouter();
next({...to,replace:true})//必不可少的，确保你的动态路由创建成功再去执行其它代码
}
})
functioncreateNewRouter(){
//请在这里做你登陆之后所做的创建动态路由的事情一模一样去做。
//不要用缓存，session或localstorage否则会报错。你需要重新发出请求登陆怎么做的这里就怎么做的
};
2.如果你发现刷新之后成功了但回退发生了问题请把路由模式切换成historyvue-route默认使用hash模式。也就是地址上出现眨眼的/#/当然history模式本体跑没问题发包后需要后端配置后端配置指导链接把链接复制发2给后端同学即可。
3.如果你想了解更多
1.为什么用了缓存会失败？这是因为当你存入缓存时候用了JSON.stringify这东西会改变compoent对象让它少了一个render函数。这里你可以打印出来你缓存之后又解析出来的路由比对一下而addRouters()要求它接受的数组参数必须严格符合路由规则。
2.next({...to,replace:true})为什么必不可少呢？在hash模式下你的动态路由可能还没创建完成就跑其它代码了毕竟路由守卫是异步操作在history模式下可能没有这个问题未实测写上最好。
3.每次刷新发请求拿路由不合适？
继续缓存，但从缓存取出来路由之后，复写路由里面所有的compoent对象。复写方法很多，如递归遍历路由。然后item.compoent=vueName;vueName也就是你导出来的vue文件变量。
补充知识：VUE动态注入路由白屏，再次刷新才显示页面问题
问题描述：
由于系统需要动态注入路由，刚开始在路由拦截里面根据账号权限动态获取路由，然后注入到本地路由中，代码如下：
//尝试获取本地store用户信息中权限字段
consthasRoles=store.getters.roles&&store.getters.roles.length>0
if(hasRoles){
next()
}else{
try{
//用token换取用户信息
store.dispatch('user/getInfo').then(roles=>{
if(!roles)newError('roleserror!')
//根据获取的用户权限映射对应的路由信息
store.dispatch('permission/generateRoutes',roles).then(accessRoutes=>{
if(!accessRoutes)newError('accessRouteserror!')
//动态加入路由
router.addRoutes(accessRoutes)
//确保路由完整性，设置replace为true这样导航就不会留下历史记录。
next({
...to,
replace:true
})
})
})
}catch(error){
//删除本地token并且重新登陆
awaitstore.dispatch('user/resetToken')
Message.error(error||'HasError')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
这样写只有在登陆之后刷新页面才会动态注入，解决办法就是在登陆之后执行一下红色字体部分代码
以上这篇基于vue动态菜单刷新空白问题的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。