Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址

最新推荐文章于 2024-05-16 07:47:36 发布
最新推荐文章于 2024-05-16 07:47:36 发布
阅读量1.3k 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56716246/article/details/127778672
版权

今天使用Element-plus导航栏组件的时候,点击选中的列表附上高亮,但是点击页面刷新后高亮会回到默认的列表上

 

 查看了Element-plus文档  看到default-active属性===页面加载时默认激活菜单的 index

这个时候发现刷新页面,地址栏的地址并没有发生变化,所以想到提取当前页面的url,然后动态渲染到该default-active属性上.  那么如何获取当前页面地址?

首先下载vue-router插件,然后引用useRoute方法,将方法实例化,最后使用

最后问题解决

 

磊554
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失
qq_65388624的博客
08-23 2060
解决Vue导航栏路由跳转，刷新后导航块高亮消失
element-plus+vue3项目（侧边栏菜单的使用和历史记录切换问题的解决（高点效果对应不上））
weixin_62639453的博客
02-28 963
描述：当我点击左边侧边栏的时候，选中高亮能够选中，但是在浏览器上面点击左右回退，他的高亮就乱来了，比如我点击修改通知---->项目管理，然后点击上面浏览器的回退按钮，右边内容能够对应回退，但是高亮选中效果保留到了修改通知。默认是没有问题的，但是我再从修改通知---->项目管理---->修改通知，按道理来说，回退一步，应该回到项目管理，高亮也是，但是他高亮显示到了修改通知，产生了错乱。从修改通知---->项目管理---->创建项目按钮（进行创建项目页面），点击回退也还是回退到修改通知，应该是回到项目管理。
Element Plus/vue3 无限级导航实现
最新发布
小张微说的博客
05-16 1273
在使用element plus 时，最初要使用的就是导航组件了，官网上看到的也就是写死的一级/二级导航，那么如何设计一个无限级且动态的导航呢？毋庸置疑，递归。废话不多说，直接看代码和效果： 代码： 目录结果 SidebarItem.vue <template> <el-menu-item :index="item ? item.url : ''" v-if="!it...
Vue3+Element-Plus 实现点击左侧菜单列表时高亮状态保持的功能 三十
build2024
12-16 7399
1.实现的效果 2.实现高亮状态保持的原理 2.1 结合官网Menu 菜单项里面有一个属性 default-active default-active 默认激活菜单的 index。并且该属性接收的值是 string 类型 小知识 default-active 属性的作用就是说，如果点击左侧菜单列表的某一项时，需要给当前点击选中的菜单列表呈现出激活高亮的状态，那么就需要把当前点击选择的菜单项index 值赋给这个属性。由于index 类型是string, 所以我们可以...
1003 Emergency (25分)
paopaotiantianquan的博客
12-04 122
第一问：第一种当到m的最短路径加上m到j的路径小于到j的路径时，那么到j的最短路径就更新为到m的最短路径。 第二种情况：如果当m的最短路径加上m到j的路径等于到j的路径时，那么到j的最短路径就更新到m的最短路径加上之前到j的最短路径的数目。 图中：1\2\3\是到m的当前最短路径，4、5是当前到j的最短路径； 第二问：当m点加上到j的距离小于当前到j的最小距离时，那权重就自动更新为m点的权重加上m点到j的权重； 当相等的时候，就要比较当前大j的权重4,5和1,2，3，加上m点到j的权重的大小，取最大的。..
关于Element-ui左侧菜单栏刷新不保留当前状态问题
m0_56420453的博客
05-23 545
这个问题还是比较常见的,在开发项目中也是比较常用的废话不多说上代码（根据一些大牛然后缩减的，勿喷） 第一步首先在 el-menu里有这么一个属性default-active 首先给他绑上一个变量如： 第二步就是 el-menu-item里的index 绑定要跳转的路由页面如： 第三步就是在 mounted里进行最后一步 如 第一步起的名字 active1 所以： 解：最后一步的$route.name 你可以理解为就是你路由里的路由名称 因为分为 path和name 我们在这只用nam...
解决Vue3 使用Element-Plus导航刷新active高亮消失
键指江湖的博客
08-03 1571
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
wlijun_0808的博客
11-17 2713
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
Vue Element ui导航栏选中高亮,刷新后选中消失
weixin_47906106的博客
10-17 2780
Vue Element ui导航栏选中高亮,刷新后选中消失
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案
03-29
基础模版-template分支单页模版-单页分支功能- 登录 / 注销- 权限验证 - 页面权限 - 指令权限 - 权限配置- 多环境- 多页配置- 引导页- 全局功能 - 三种不同风格 layout 布局 - 动态侧边栏（支持多级路由嵌套） - ...
Vue实现导航栏点击当前标签变色功能
10-16
主要为大家详细介绍了Vue实现导航栏点击当前标签变色功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 :red_apple: 尝试 $ git clone https://github.com/ntnyq/element-plus-admin.git $ cd element-plus-admin $ npm...
vue3+element-plus+admin
04-12
基于vue3和element-plus组件开发的项目管理平台，包含用户权限设置功能；
ElementUI导航菜单使用(并解决刷新会调回首页)
眾K的博客
11-25 3583
新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...
关于VUE + Element 侧边栏页面刷新后不高亮显示的问题
HelloWord176的博客
01-25 999
写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，针对这个问题特别提出以下见解： 直接贴代码： <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#333"
基于Vue+Element Plus实现快速导航
程序员们必读的博客，涵盖IT技术、编程经验等领域。
11-29 3588
快速导航对于前端开发的靓仔们应该是很熟悉了，他能快速的切换到之前打开的页面，是系统更加灵活方便。我这里采用的是Vue+Element plus+Vuex+Router实现的快速导航，供大家参考。基于Vue+Element Plus实现快速导航完成了，主要涉及到的主要涉及到的知识点有Vue3、Vuex、Element Plus和Router，需要注意的就是计算下表的逻辑，还有就是快速导航绑定Dropdown组件的地方。如果有更好的实现方式或有疑问的靓仔们评论区留言。
vue-element-admin顶部导航栏
08-01
vue-element-admin的顶部导航栏可以通过修改导航栏组件的mode属性来实现。你可以将mode属性设置为"horizontal"这样导航栏就会以水平方式显示。[1]在项目中，你可以使用vue-admin-template作为基础模板进行改造，以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值