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

最新推荐文章于 2024-08-10 18:06:52 发布
最新推荐文章于 2024-08-10 18:06:52 发布
阅读量6k 收藏 8
点赞数 3
分类专栏： vue 文章标签： vue 导航菜单刷新状态不消失 vue导航栏 vue导航 vue导航菜单状态 vue菜单栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mentalitys/article/details/91386034
版权

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

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

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

 

blueBings
关注
专栏目录
vue切换菜单时不需要页面刷新_基于vue 动态菜单 刷新空白问题的解决
weixin_39876877的博客
12-19 281
1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。代码示范注意点：//注意：确定自己避免了路由守卫进入死循环let oneRun = true; //通过oneRun变量控制 避免陷入死循环router.beforeEach((...
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
10-14
在Vue开发过程中，导航...总结，实现Vue导航菜单刷新状态不消失并显示对应路由界面的关键在于动态生成路由、正确使用路由守卫以及处理好刷新时的路由恢复。理解并掌握这些知识点，可以帮助开发者构建更健壮的Vue应用。
页面刷新时保持不变的导航菜单
11-01
我在做电子地图，每次进行操作页面都会进行刷新，导航菜单就恢复初始状态，后来在网上找到了些代码，页面刷新后菜单保持原来展开的样式。
为什么动态路由刷新之后路由消失,以及解决措施
最新发布
qq_55121347的博客
08-10 768
为什么动态路由刷新之后路由消失,以及解决措施
js获取radio选中的值_vue中页面刷新tabs导航保持选中项不变
weixin_39848097的博客
11-30 353
问题描述：Vue框架中PC端页面刷新时，导航选中项会默认刷新实现效果：实现页面刷新，导航选中项保持不变的效果注：实例中使用到element-ui组件库中tabs推荐使用 npm 的方式安装：npm i element-ui -S下面是具体实现代码Main.js文件中：主要是引入注册element-ui，如下： 1importVuefrom'vue' 2importAppfrom...
vue页面刷新，定位导航栏
shichong123的博客
06-08 7105
项目还没结束，vue的踩坑之路就不能停（酸爽），我发现用vue-router,每次刷新页面，导航栏就会自动定位到首页，像这样，用户体验真的是相当差。思来想去，想不到什么好办法，去网上查资料，发现路由被激活了之后，生成的a链接里面会有一个类，喏，就是下面这个：有了这个类就好办了，我个给每一个小菜单加一个自定义属性，属于同一个大菜单的就加相同的属性，敲黑板了，这里很关键了，在mounted里，获取拥有...
Vue H5项目实现根据路由来实现底部切换栏，刷新页面保持高亮
前端开发小白9527
11-30 1325
HTML中： ​ <!-- 根据路由位置给底部菜单进行高亮显示 --> <div :class="['enterprise',$route.meta.index==0? 'active': '' ]" @click="goPage1()" > <!-- <i class="el-icon-office-building"></i> --> <span class="icon
vue实现导航栏效果（选中状态刷新不消失）
11-27
总的来说，实现一个具有刷新后保持选中状态的Vue导航栏，需要结合Vue的数据绑定、事件处理、路由跳转和浏览器的`sessionStorage`。通过这种方式，我们可以提供更优秀的用户体验，确保用户在导航时的连续性。
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
总之，Vue页面在手动刷新后，为了恢复导航栏的初始状态，我们需要在组件创建后获取当前路由并更新`defaultActiveIndex`的值，同时监听路由变化以应对动态导航。通过这种方式，无论页面是否被刷新，都能保持导航栏的...
vue使用element-ui，页面刷新，导航栏选中问题
前端打工人的博客
03-24 1797
当你在使用纵向导航时，刷新了页面，左侧导航显示了默认的选项，导航发生了变化，而路由及页面并未改变，那怎么让它选中路由的页面呢 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 第一种方法： 把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题 computed: { activeIndex() { const ar
常用的JS后台导航菜单，可刷新不变
02-25
常用的JS后台导航菜单，可刷新不变 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="UTF-8" lang="UTF-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="UTF-8" /> <title>后台管理</title> <style type="text/css"> body {margin:0;text-align:center;color:#000;font:normal 12px Arial,Verdana,Tahoma;text-align:center;background:#C8D0D5;line-height:150%;} a:link,a:visited {color:#385065;text-decoration:none} a:hover {text-decoration:underline} #menu {width:150px;margin:0px 15px;padding:0px;text-align:left;list-style:none} #menu .item {margin:5px 0px;padding:0px;list-style:none} a.title:link, a.title:visited, a.title:hover {display:block;background:url(http://www.tblog.com.cn/attachments/month_0609/m20069110491.gif) no-repeat;color:#385065;font-weight:bold;padding:2px 0 0 22px;width:128px;line-height:23px;cursor:pointer;text-decoration:none} #menu .item ul {border:1px solid #9FACB7;margin:0;width:118px;padding:3px 0px 3px 30px;background:#fff;list-style:none;display:none} #menu .item ul li {display:block;} </style> [removed] // --- 获取ClassName document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var j = 0; j < elem.length; j++) { var classes = elem[j].className; if (myclass.test(classes)) retnode.push(elem[j]); } return retnode; } // --- 隐藏所有 function HideAll() { var items = document.getElementsByClassName("optiton"); for (var j=0; j<items.length; j++) { items[j].style.display = "none"; } } // --- 设置cookie function setCookie(sName,sValue,expireHours) { var cookieString = sName + "=" + escape(sValue); //;判断是否设置过期时间 if (expireHours>0) { var date = new Date(); date.setTime(date.getTime + expireHours * 3600 * 1000); cookieString = cookieString + "; expire=" + date.toGMTString(); } [removed] = cookieString; } //--- 获取cookie function getCookie(sName) { var aCookie = [removed].split("; "); for (var j=0; j < aCookie.length; j++){ var aCrumb = aCookie[j].split("="); if (escape(sName) == aCrumb[0]) return unescape(aCrumb[1]); } return null; } window { var show_item = "opt_1"; if (getCookie("show_item") != null) { show_item= "opt_" + getCookie("show_item"); } document.getElementById(show_item).style.display = "block"; var items = document.getElementsByClassName("title"); for (var j=0; j<items.length; j++) { items[j] { var o = document.getElementById("opt_" + this.name); if (o.style.display != "block") { HideAll(); o.style.display = "block"; setCookie("show_item",this.name); } else { o.style.display = "none"; } } } } [removed] </head> <body> <ul id="menu"> <li class="item"><a href="[removed]void(0)" class="title" name="1">基本信息</a> <ul id="opt_1" class="optiton"> <li><a href="#">企业简介</a></li> <li><a href="#">企业新闻</a></li> </ul> </li> <li class="item"><a href="[removed]void(0)" class="title" name="2">系统管理</a> <ul id="opt_2" class="optiton"> <li><a href="#">企业简介</a></li> <li><a href="#">企业新闻</a></li> </ul> </li> <li class="item"><a href="[removed]void(0)" class="title" name="3">系统管理</a> <ul id="opt_3" class="optiton"> <li><a href="#">会员管理</a></li> <li><a href="#">管理员设置</a></li> <li><a href="#">权限组设置</a></li> <li><a href="#">退出系统</a></li> </ul> </li> </ul> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
vue中刷新页面定位导航栏（解决刷新页面导航栏自动定位到首页的问题+路由传参）
坤音女孩的博客
11-02 7473
1.页面刷新时，判断URL地址与左边导航栏定位是否相符 PS1：window.location.hash返回从井号#开始的地址，例如http://aaa.com/#/action/aboutUs，window.location.hash获取的是#/action/aboutUs PS2：Location对象属性 2.刷新页面，定位到相当于的导航栏 ...
Vue开发之底部导航栏
wangmj518的专栏
05-06 1965
一、导航切换 封装一个公用组件Tabbar，在需要导航页的页面引入组件即可。代码如下： <template> <div class="tabbar"> <!-- 占位容器 --> <div class="placegolder-container"></div> <!-- 底部导航栏 --> <div class="bottom-tabs"> <div class="tabs-item" v-f
vue的动态路由，防止addRoutes无限添加，以及F5刷新不消失，第一次加载不消失
beichen3997的博客
03-04 4073
一 login.vue // 用户登录 handleLogin(nameForm) { this.$refs[nameForm].validate(valid =&gt; { // 数据传递的规则验证 if (valid) { let smt= dataRoutes; // const _this=...
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
热门推荐
qq_38057434的博客
07-11 1万+
今天闲来无事整理了一套后台管理系统的侧边栏菜单，实现了页面刷新路由保持不变和菜单也是当前点击的高亮状态 来一起看看吧！ 首先，菜单数据是动态的，注意的是 id 和 路由的 name保持一致，页面刷新要用到： 一级菜单不用name，因为没用到路由跳转 const menus = [ { id: '0', label: '首页', path: '/', icon: 'fa fa-dashboa...
VUE项目中关于F5刷新的一些记录
凉茶冰
05-16 8833
目录 前言 问题描述 问题分析 问题解决 总结 前言 基于vue-cli脚手架开发的单页应用有他特殊的特点和优势。因为是单页应用，所以在进行F5刷新的时候和之前常规的html页面还有区分。主要区别在于，vue-router接管了浏览器的前进、后退、刷新等事件，通过对相关事件的监听，动态的操作popstate,pushstate,replacestate等api来完成浏览器url的变化...
vue 页面不刷新_Vue页面刷新数据丢失，如何找回？
weixin_39945792的博客
01-26 205
点击上方“前端印象”，选择“设为星标”第一时间关注技术干货！在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用local...
vue左菜单栏刷新教程：实战与解决策略
本文档主要介绍了如何在Vue应用中实现左侧菜单栏的刷新操作，针对初次接触Vue的新手具有很高的参考价值。作者以自己的实际经验为背景，分享了解决项目中左侧菜单栏不自动刷新问题的方法。 首先，作者在HTML中使用了...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值