vue中element-ui切换导航栏高亮展示

最新推荐文章于 2024-05-15 11:55:14 发布
最新推荐文章于 2024-05-15 11:55:14 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shaoyouiqng/article/details/106721550
版权

在开发的过程中tabs栏总是在刷新的时候就直接初始化了，我们需要的效果是刷新不改变高亮，这个能不能做到，当然是能的呀！一起来搞一下啊

思路：首先我们需要把这个值在页面刷新的时候给保存起来，放在localStorage或者Cookie都行的。然后在created中获取一下，在这个页面销毁的时候，给删除这个存放的内容

在这里插入图片描述
我在开发的时候用到是el-menu里面的default-active这个就是放入展示高亮的区域，select绑定的是点击任何一栏就可以触发，在这个方法里，把值直接存入
在这里插入图片描述
当我们进入这个页面的时候就直接取用
在这里插入图片描述
在destoryed钩子函数或者进入该页面的上一个跳转出清楚这个activeIndex

下课

前端小峰
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element导航栏对应路由高亮在刷新或前进后退时错误（二级子路由和三级子路由以上各自的解决办法）
hhhhhhhssss的博客
12-09 797
问题描述： 当设置的有默认路径时，进入到二级或三级路由时，刷新或前进后退操作会导致导航栏高亮没有改变或错误 使用前提 将router里面的main.js里的路由路径设置全部设置为完整的路径。 routes: [{ //路径为空时跳到发现音乐 path: '', redirect: '/musicHome/findMusic', }, { path: '/musicHome',
vue+element导航栏高亮显示的解决方式
10-16
今天小编就为大家分享一篇vue+element导航栏高亮显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue Element UI 导航高亮
weixin_30328063的博客
04-12 128
1. activeIndex 为默认高亮值，根据改变activeIndex的值来改变高亮的值　　当页面改变的时候获取当前的路由地址，截取第一个 / 后面的值，就是当前的高亮值了　　为什么要截取呢？　　因为点到子集页面的时候，刷新页面找不到路由，所以在设置路由的时候就要注意了，是两层了（例如：/list/details） <template> <el-menu :d...
vue实现点击高亮效果
最新发布
m0_57005111的博客
05-15 598
【代码】vue实现点击高亮效果。
vue如何实现tab栏点击高亮效果
WayneP_的博客
05-18 3363
tab栏实现点击高亮 <template> <div> <!-- v-for循环渲染arr --> <!-- 把当前点击的name通过selected传给data里的active --> <!-- 判断如果active的值与当前点击的name相同 则给当前点击的div加上active样式 --> &l...
vue3 el-menu初始化时选中没有高亮的问题（default-active和index的问题）
weixin_63896561的博客
11-14 1291
1、default-active的值是字符串，那么index绑定的值也要是字符串，且数字对应。不能default-avtive绑定的是1，而menu-item的index绑定的是45。为了避免页面刷新时menu组件的选中样式消失，所以在每次点击的时候我们要将default-active重新赋值。所以el-menu-item的index项一定要和default-active对应起来。2、default-active的值是当前选中menu-item项的index。
elementui+vue 点击子菜单（或刷新）的高亮状态
weixin_44368573的博客
08-29 1162
功能：切换导航时实现菜单的高亮的激活状态； 思路：点击菜单->获取路由地址->存在session中->刷新页面或切换时将session中的值赋值给el-menu中的default-active属性（当前被激活的index） 代码： //结构 <el-menu router :default-active="activePath" active-text-color="pink" :collapse="isCollapse" :collapse-transition="false
vue使用ElementUI时导航栏默认展开功能的实现
08-27
Vue 使用 ElementUI 时导航栏默认展开功能的实现 知识点： 1. ElementUI 导航栏默认展开功能的实现原理 在使用 ElementUI 时，默认情况下，导航栏是不能展开的。这是因为 ElementUI 的设计理念是让用户手动展开...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
如何使用VuePress搭建一个类型element ui文档
10-17
Element UI 是一套流行的 Vue.js UI 组件库，而通过 VuePress，我们可以构建一个展示组件、功能和使用方法的文档网站。 首先，为了开始搭建过程，我们需要在本地安装 VuePress。在你的项目目录中，执行以下命令： ...
在Vue中实现随hash改变响应菜单高亮
10-15
总结来说，实现在Vue中随hash改变响应菜单高亮，我们需要结合Vue Router的生命周期钩子或监听`$route`对象，以及Element UI的菜单组件特性。同时，理解Vue组件的复用机制和动态组件的概念也是关键。通过这些方法，...
人力资源中台动态路由tab栏效果
qq_48093489的博客
04-15 283
动态路由Tab栏1.效果图2.技术栈3.实现思路 1.效果图 2.技术栈 借助elementUI组件库的tabs组件，结合路由对象，实现点击导航栏，增加tab栏，同时tab栏可删除的效果。 3.实现思路 封装tabs栏组件，设置插槽自定义内容 <el-tabs v-model="activeTabName" type="border-card" :closable="true" @tab-remove="removeTab" > <el-t
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 1000
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
小张与BUG
10-08 4379
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
element ui强制设置当前页码、设置高亮等问题的处理
qq_36462217的博客
06-20 1830
element ui强制改变页码为1,第一页已高亮,但是点击上一次的页码时,不触发当前页函数@current-change问题处理
vue+element导航栏高亮显示的问题
吃瓜群众的博客
09-04 8145
用导航菜单时遇到的一些问题：点击打开官网例子 问题1： 页面强制刷新，按F5时，页面如果没有好好设置的话，导航栏默认叠起来，而且无高亮显示；刷新后导航栏显示和之前不一致，如图所示 解决： html关键代码设置 :default-active="defaultUrl" 这儿的原理就是defaultUrl跟#/后面的一致，也就是说跟router.js中的path一致才行（rou...
Element-ui中导航菜单高亮问题
this is it
04-03 6610
开启路由模式 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="handleSelect" route...
vue cli+element ui顶部导航栏切换
legendaryhaha的博客
05-04 9700
vue cli+element ui顶部导航栏切换效果实现表单样式javascript路由 效果 实现 表单样式 说明：router属性很重要，default-active="this.$route.path"也很重要。 <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="...
vue-element-admin顶部导航栏
08-01
vue-element-admin的顶部导航栏可以通过修改导航栏组件的mode属性来实现。你可以将mode属性设置为"horizontal"这样导航栏就会以水平方式显示。[1]在项目中，你可以使用vue-admin-template作为基础模板进行改造，以满足顶部导航菜单和侧边导航相结合的需求。[2]具体操作是复制一份@/views/layout/Sidebar组件，将其粘贴到相同路径下，并将组件名改为HeadNavbar。然后在index.js中声明该组件，并修改@/views/layout/HeadNavbar/index.vue文件中的template部分，将el-menu的mode属性设置为"horizontal"。这样就可以实现顶部导航栏的效果了。[3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值