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


Posted in Javascript onAugust 06, 2020

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 动态菜单 刷新空白问题的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 #Javascript
You might like
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
个人简历自我鉴定
2013/10/11 职场文书
门卫岗位安全职责
2013/12/13 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
小学端午节活动方案
2014/03/13 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
年度考核个人总结
2015/03/06 职场文书
资料员岗位职责范本
2015/04/13 职场文书
涨价通知
2015/04/23 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
springboot入门 之profile设置方式
2022/04/04 Java/Android