基于vue 动态菜单刷新空白问题的解决

145 阅读 0 评论 96 点赞

我是靠谱客的博主高大草丛，最近开发中收集的这篇文章主要介绍基于vue 动态菜单刷新空白问题的解决，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.先确认自己在route.js 或者 main.js 中有没有使用路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。

代码示范注意点：

//注意：确定自己避免了路由守卫进入死循环
let oneRun = true; //通过oneRun变量控制 避免陷入死循环
router.beforeEach((to,from,next)=>{
  if(oneRun){
    oneRun = false;//必须在creatNewRouter() 执行
    createNewRouter();
    next({...to, replace: true})// 必不可少的，确保你的动态路由创建成功再去执行其它代码
  }
})
 
function createNewRouter(){
  //请在这里做你登陆之后所做的创建动态路由的事情 一模一样去做。
  //不要用缓存，session或localstorage 否则会报错。你需要重新发出请求 登陆怎么做的 这里就怎么做的
};

2. 如果你发现刷新之后成功了但回退发生了问题请把路由模式切换成 history vue-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 用户信息中权限字段
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
 next()
} else {
 try {
  // 用token换取用户信息
  store.dispatch('user/getInfo').then(roles => {
   if (!roles) new Error('roles error!')
   // 根据获取的用户权限映射对应的路由信息
   store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
    if (!accessRoutes) new Error('accessRoutes error!')
    // 动态加入路由
    router.addRoutes(accessRoutes)
    // 确保路由完整性，设置replace 为true 这样导航就不会留下历史记录。
    next({
     ...to,
     replace: true
    })
   })
  })
 } catch (error) {
  // 删除本地token 并且重新登陆
  await store.dispatch('user/resetToken')
  Message.error(error || 'Has Error')
  next(`/login?redirect=${to.path}`)
  NProgress.done()
 }
}

这样写只有在登陆之后刷新页面才会动态注入，解决办法就是在登陆之后执行一下红色字体部分代码

以上这篇基于vue 动态菜单刷新空白问题的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。