基于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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
JS中多层次排序算法的实现代码
Jan 06 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
详谈javascript精度问题与调整
2017/07/08 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
法定代表人免职证明
2015/06/24 职场文书
辩论会主持词
2015/07/03 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
七年级作文之英语老师
2019/10/28 职场文书