element-ui 刷新后对应菜单栏的高亮

最新推荐文章于 2023-04-22 20:32:38 发布
最新推荐文章于 2023-04-22 20:32:38 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 前端知识点 文章标签： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40659167/article/details/86687572
版权

当菜单栏作为路由转换的router-link的时候，
在el-menu标签中添加 :default-active="this.$route.path"
而且还要记得加个router

大翰仔仔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element导航栏高亮显示的解决方式
12-13
用导航菜单时遇到的一些问题：点击打开官网例子 问题1： 页面强制刷新，按F5时，页面如果没有好好设置的话，导航栏默认叠起来，而且无高亮显示；刷新后导航栏显示和之前不一致，如图所示 解决： html关键代码设置 :default-active=”defaultUrl” 这儿的原理就是defaultUrl跟#/后面的一致，也就是说跟router.js中的path一致才行（router.js见后文） [removed].href.split(‘/#’)[1] 获取的是”http://localhost:8080/#/search-contact/1″中的”/search-cont
vue Element UI 导航高亮
weixin_30328063的博客
04-12 127
1. activeIndex 为默认高亮值，根据改变activeIndex的值来改变高亮的值　　当页面改变的时候获取当前的路由地址，截取第一个 / 后面的值，就是当前的高亮值了　　为什么要截取呢？　　因为点到子集页面的时候，刷新页面找不到路由，所以在设置路由的时候就要注意了，是两层了（例如：/list/details） <template> <el-menu :d...
vue element-ui路由切换到添加或编辑页面实现侧边栏高亮
学习记录
04-29 2139
问题：添加和编辑页面使用路由跳转的方式切换，但是切换到添加页面后，添加功能所在页面对应的侧边栏不会高亮显示。 解决方法： route 的 index.js 中给需要改变高亮的路由（添加和编辑页面）增加guidePath和jumpPath字段， guidePath：就是一个状态变量，这里可以表示当前路由高亮指向不是本身 jumpPath：表示高亮指向的路由。 在侧边栏el-...
Element-ui NavMenu 导航菜单高亮问题
0的0次方的博客
02-26 1241
查了很多文档发现 解决方案一： 开启路由模式，标签中设置default-active 绑定 :default-active="$route.path" 发现不能完全解决我遇到的问题 于是，参考文档：https://blog.csdn.net/Jayne_z/article/details/88028336 综合得到第二套方案 解决方案二： <el-menu :default-active...
element-ui 导航刷新高亮，进入子路由后保持高亮
weixin_42508745的博客
12-12 1664
<el-menu style="border-right:0" :default-active="$route.path" background-color="#fff" text-color="#717E8C" active-text-color="#18A590" router > </el-menu> 将default-a...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
在Vue中实现随hash改变响应菜单高亮
11-20
在Vue.js中，实现一个管理页面菜单栏，随着URL的hash值变化自动更新菜单的高亮状态是一项常见的需求。在Vue结合Element UI的场景下，我们通常会利用Vue Router来处理路由变化。然而，当hash值改变时，菜单栏的状态...
vue-demo:一些实用的vue+element组件功能
04-23
侧边菜单栏实现,页面刷新高亮当前页面菜单 demo小组件 1. 组织架构图,树形图 2. 图片旋转 3. 放大镜功能 4. 级联面板应用 5. vue页面打印功能 PDF预览 图形编辑 1. 图形旋转,平移,缩放 2. 页面多个upload上传文件 ...
Element-ui左侧菜单刷新依旧高亮显示当前菜单
weixin_30278237的博客
07-31 240
废话不多说，直接上代码 <el-menu class="sidebar-el-menu" :default-active="currentMenu" background-color="#324157" @select="handleSelect" text-color="#bfcbd9" act...
设置菜单栏中和地址栏对应的活动项高亮
dianchou9307的博客
12-04 116
1 function active() { 2 var menu = $("#menu a"); 3 if (menu != null) { 4 var urlstr = location.href; 5 var urlstatus = false; 6 7 menu.each(functio...
vue + element-ui的NavMenu 导航菜单，解决高亮显示问题，二级三级路由依然有效！，从地址栏和页面其他按钮改变路由，照样触发高亮，炒鸡简单，不看后悔的那种！
lucky_Lzx的博客
08-20 2102
今天我们来搞一个element-ui的问题，element-ui里NavMenu 导航菜单，这个菜单啊有俩种，一种是我们的侧边栏菜单，另一种是普通的横向菜单，那我们搞什么问题呢？ 首先 最重要的问题放第一个：咱们通过页面，点击按钮或者是地址栏输入地址，来让侧边栏的模块进行对应的高亮显示，并且自动展开对应的路由模块，哦对了，我的侧边栏是二级路由，或许对你们有帮助，答案有点太多了在下面解释。 如何绑定路由 答案：在el-menu的配置项里加router，并且你需要将default-active绑定路由
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
Shids_的博客
08-10 3945
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
element侧边导航栏多层菜单时上级菜单无高亮解决方案
weixin_39128022的博客
05-26 1383
element侧边导航栏多层菜单时上级菜单无高亮解决方案解决方案具体实现 解决方案 查阅网上很多解决方案，都是千篇一律，而且都无法有效解决我的问题。其实要使element的侧边导航栏在点击菜单后使父级菜单一起高亮的方法很简单，只需要修改其样式就可解决。 具体实现 只需在你的页面文件中添加下面的css样式即可 代码如下： <style lang="scss" scoped> //设置侧边栏父级菜单高亮 ::v-deep(.el-submenu.is-active > .el-submen
vue element-ui中选择子菜单时父菜单高亮
m0_51371710的博客
04-22 1021
发现页面载入时和刷新页面时能高亮显示了，但选择子菜单时父菜单无高亮。不知道有没有小伙伴分享自己的解决方案，一起进步。但发现页面载入时和刷新页面时高亮显示消失。这时候想到用计算属性来解决办法。最近想要这样一种效果。
解决element-ui框架下导航菜单el-menu 刷新后菜单高亮问题
热门推荐
Jayne_z的博客
02-28 1万+
element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。 element-ui框架el-menu 组件提供一个默认高亮的属性:default-active=“”，页面刷新后可以获取页面的url ,进行处理，获得el-menu-item里面的index,然后赋值给default-active，这样就可以解决页面刷新后element-ui菜单组件高亮问题。具体实现可以看下面代码 ...
Element ui 导航栏 刷新时高亮
IT_iosers的博客
08-04 376
1、在组件中 <el-container> <el-aside> <el-row class="tac"> <el-col> <el-menu :default-active="$route.meta.parentpath" //重点class="menu" background-color="#344055"
element-ui菜单栏刷新页面
最新发布
10-15
要在element-ui菜单栏中实现刷新页面，可以在菜单项的click事件中调用location.reload()方法来实现。具体代码如下： ``` <el-menu-item index="1" @click="handleRefresh"> 刷新页面 </el-menu-item> ... methods: { handleRefresh() { location.reload(); } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值