vue 导航菜单刷新状态不消失,显示对应的路由界面操作
使用vue element-ui框架构建公共导航栏（https://element.eleme.cn/#/zh-CN/component/menu）
按F5刷新就会返回默认定义的路由，使用 "$route.path" 刷新后还是在最新的一个路由：
<el-menu :default-active="$route.path"></el-menu>
补充知识：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 导航菜单刷新状态不消失,显示对应的路由界面操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue-quill-editor实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
vue大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue.js slot插槽的作用域插槽用法详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法，需要的朋友参考下吧2018-04-04
今天给大家分享vue中tab 选项卡的一些套路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-11
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vuejs实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue前端项目部署的三种方案,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue3的setup的使用和原理解析,通过本文我们学习了 setup 函数执行的过程及 Vue 是如何处理捕获 setup 的返回结果的，需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了vue跳转页面并且实现参数传递接受示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论