基于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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
基于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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php&java(一)
2006/10/09 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php常用正则函数实例小结
2016/12/29 PHP
php中序列化与反序列化详解
2017/02/13 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python实现感知器
2017/12/19 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python调用摄像头的示例代码
2020/09/28 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
C#面试常见问题
2013/02/25 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
党支部半年考察意见
2015/06/01 职场文书
太行山上观后感
2015/06/05 职场文书
余世维讲座观后感
2015/06/11 职场文书
老乡会致辞
2015/07/28 职场文书
护理培训心得体会
2016/01/22 职场文书