基于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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
javascript动画算法实例分析
Jul 31 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 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
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
JS实现上传图片实时预览功能
2017/05/22 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
银行员工辞职信范文
2014/01/20 职场文书
初一体育教学反思
2014/01/29 职场文书
社会学专业求职信
2014/07/17 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
客户答谢会致辞
2015/01/20 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
详解JVM系列之内存模型
2021/06/10 Javascript
vue ref如何获取子组件属性值
2022/03/31 Vue.js
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android