vue 导航菜单刷新状态不消失,显示对应的路由界面操作


Posted in Javascript onAugust 06, 2020

使用vue element-ui框架构建公共导航栏(https://element.eleme.cn/#/zh-CN/component/menu)

按F5刷新就会返回默认定义的路由,使用 "$route.path" 刷新后还是在最新的一个路由:

<el-menu :default-active="$route.path"></el-menu>

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

补充知识: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 导航菜单刷新状态不消失,显示对应的路由界面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Node调用Java的示例代码
Sep 20 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 #Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 #Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
详解python进行mp3格式判断
2016/12/23 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python高级property属性用法实例分析
2019/11/19 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
文员岗位职责
2013/11/09 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
关于学习的演讲稿
2014/05/10 职场文书
教研处工作方案
2014/05/26 职场文书
本科毕业生自荐信
2014/06/02 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
初中班长竞选稿
2015/11/20 职场文书
2016年教师节感言
2015/12/09 职场文书
《比的意义》教学反思
2016/02/18 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书