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

最新推荐文章于 2022-08-17 17:37:17 发布
原创 最新推荐文章于 2022-08-17 17:37:17 发布 · 6k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 导航菜单刷新状态不消失 #vue导航栏 #vue导航 #vue导航菜单状态 #vue菜单栏

本文介绍如何使用VueElement-UI框架构建公共导航栏，并解决按F5刷新页面时返回默认路由的问题。通过设置<el-menu>的default-active属性为$route.path，确保刷新后仍停留在当前路由。

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

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

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

 

vue3+element-plus：解决侧边导航在页面刷新后失去高亮的问题，导航菜单使用vue-router刷新后高亮显示不一致完美解决办法（导航menu高亮变色问题，无需大改动即可解决，详细实例代码
高级前端工程师
08-17 4491
vue3 element中导航menu高亮变色问题，Element-Plus导航栏刷新高亮消失，页面刷新后侧边导航失去高亮，导航栏根据路由改变状态，Vue3中使用el-menu高亮显示问题，菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项，element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑，解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失，解决Vue3 使用Element-Plus导航刷新active高亮消失，el-menu添加router属性文字颜色选中激
页面刷新时保持不变的导航菜单
11-01
我在做电子地图，每次进行操作页面都会进行刷新，导航菜单就恢复初始状态，后来在网上找到了些代码，页面刷新后菜单保持原来展开的样式。
vue切换菜单时不需要页面刷新_基于vue 动态菜单 刷新空白问题的解决
weixin_39876877的博客
12-19 346
1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。代码示范注意点：//注意：确定自己避免了路由守卫进入死循环let oneRun = true; //通过oneRun变量控制 避免陷入死循环router.beforeEach((...
js获取radio选中的值_vue中页面刷新tabs导航保持选中项不变
weixin_39848097的博客
11-30 404
问题描述：Vue框架中PC端页面刷新时，导航选中项会默认刷新实现效果：实现页面刷新，导航选中项保持不变的效果注：实例中使用到element-ui组件库中tabs推荐使用 npm 的方式安装：npm i element-ui -S下面是具体实现代码Main.js文件中：主要是引入注册element-ui，如下： 1importVuefrom'vue' 2importAppfrom...
vue页面刷新，定位导航栏
shichong123的博客
06-08 7171
项目还没结束，vue的踩坑之路就不能停（酸爽），我发现用vue-router,每次刷新页面，导航栏就会自动定位到首页，像这样，用户体验真的是相当差。思来想去，想不到什么好办法，去网上查资料，发现路由被激活了之后，生成的a链接里面会有一个类，喏，就是下面这个：有了这个类就好办了，我个给每一个小菜单加一个自定义属性，属于同一个大菜单的就加相同的属性，敲黑板了，这里很关键了，在mounted里，获取拥有...
Vue H5项目实现根据路由来实现底部切换栏，刷新页面保持高亮
前端开发小白9527
11-30 1393
HTML中： ​ <!-- 根据路由位置给底部菜单进行高亮显示 --> <div :class="['enterprise',$route.meta.index==0? 'active': '' ]" @click="goPage1()" > <!-- <i class="el-icon-office-building"></i> --> <span class="icon
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
10-14
在Vue开发过程中，导航...总结，实现Vue导航菜单刷新状态不消失并显示对应路由界面的关键在于动态生成路由、正确使用路由守卫以及处理好刷新时的路由恢复。理解并掌握这些知识点，可以帮助开发者构建更健壮的Vue应用。
vue实现导航栏效果（选中状态刷新不消失）
11-27
总的来说，实现一个具有刷新后保持选中状态的Vue导航栏，需要结合Vue的数据绑定、事件处理、路由跳转和浏览器的`sessionStorage`。通过这种方式，我们可以提供更优秀的用户体验，确保用户在导航时的连续性。
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
vue使用element-ui，页面刷新，导航栏选中问题
前端打工人的博客
03-24 1909
当你在使用纵向导航时，刷新了页面，左侧导航显示了默认的选项，导航发生了变化，而路由及页面并未改变，那怎么让它选中路由的页面呢 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 第一种方法： 把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题 computed: { activeIndex() { const ar
vue中刷新页面定位导航栏（解决刷新页面导航栏自动定位到首页的问题+路由传参）
坤音女孩的博客
11-02 7572
1.页面刷新时，判断URL地址与左边导航栏定位是否相符 PS1：window.location.hash返回从井号#开始的地址，例如http://aaa.com/#/action/aboutUs，window.location.hash获取的是#/action/aboutUs PS2：Location对象属性 2.刷新页面，定位到相当于的导航栏 ...
Vue开发之底部导航栏
wangmj518的专栏
05-06 2091
一、导航切换 封装一个公用组件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 4130
一 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 8961
目录 前言 问题描述 问题分析 问题解决 总结 前言 基于vue-cli脚手架开发的单页应用有他特殊的特点和优势。因为是单页应用，所以在进行F5刷新的时候和之前常规的html页面还有区分。主要区别在于，vue-router接管了浏览器的前进、后退、刷新等事件，通过对相关事件的监听，动态的操作popstate,pushstate,replacestate等api来完成浏览器url的变化...
vue 页面不刷新_Vue页面刷新数据丢失，如何找回？
weixin_39945792的博客
01-26 260
点击上方“前端印象”，选择“设为星标”第一时间关注技术干货！在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用local...
vue页面详情页返回列表页_vue 详情页返回列表页面时保持列表的位置状态不变...
weixin_40001025的博客
12-19 1321
方法一：1.在router.js里面(即路由文件中)，此时模式为 historyconst router = new VueRouter({mode: 'history',routes,scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {if (from.meta.kee...
elementUI-解决刷新页面路由地址和页面不跟随变化的问题
super码力的博客
08-17 2944
elementUI-解决刷新页面路由地址和页面不跟随变化的问题
Vue实现左边导航栏，右边显示对应内容
Otto的学习笔记
05-03 1万+
使用嵌套路由实现 这里重点要注意使用<router-view></router-view> ，路由出口, 路由匹配到的组件将渲染在这里 导航栏代码userInfo.vue： <template> <el-row type="flex" justify="center" :gutter="8"> <el-col v-if="user" :span="20"> <el-col :span="4">
Vue与Element UI实现导航、标签导航与路由跳转教程
当用户点击时，根据指定的路径，Vue Router会自动找到对应的组件并渲染在中，从而实现页面内容的切换而不刷新整个页面。 **路由转换：** 路由转换通常指的是在路由跳转时所伴随的动画或过渡效果，它可以提升用户...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值