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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
上班离岗检讨书
2014/01/27 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
预备党员综合考察材料
2014/05/31 职场文书
施工工地安全标语
2014/06/07 职场文书
甲午风云观后感
2015/06/02 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL