Element-UI 侧边栏高亮

最新推荐文章于 2022-10-13 09:55:48 发布
最新推荐文章于 2022-10-13 09:55:48 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Element-UI 文章标签： ui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706779/article/details/122999852
版权

Element-UI 侧边栏高亮

一、出现场景

在使用 Element-UI 的侧边导航栏时我遇到了两个问题：

  1. 按 F5 刷新页面后，导航栏默认折叠起来，并且无高亮显示
  2. 点击浏览器的前进后退按钮后，高亮显示与页面内容不同步

下面我就这两个问题给出自己的解决办法。

二、解决办法

1. F5 刷新高亮问题

原理：当地址栏发生变化时，修改改变默认显示高亮的值。

  1. 首先给导航栏加上 default-active 属性，记得加上冒号。
    在这里插入图片描述
  2. 在 data 中定义参数，根据进入系统后的首页设置默认值。
    在这里插入图片描述<
最低0.47元/天 解锁文章
什么时候才能为富不仁
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题
weixin_39783915的博客
12-19 1216
问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...
解决VUE + Element 侧边栏页面刷新后不高亮显示的问题
LJJONESEED的博客
07-20 599
<el-menu :default-active="$route.path" //写上这句就好了 >
element ui 刷新后使侧边栏高亮
cx_0104的博客
10-13 402
element ui 刷新后对应侧边栏高亮
解决Element-UI 侧边栏页面刷新后不高亮显示的问题
尘生杜若
05-08 4308
最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间，今天有时间搞了一下，发现想的时候可能有些复杂，其实这个问题还是比较简单的。 例如：下面这段代码 <template> <el-aside width="240px"...
element-ui 左侧菜单栏默认高亮问题
qq_46100747的博客
03-23 1033
<el-menu :default-active="$route.path" unique-opened :collapse-transition="false" router background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item :index="
element-ui导航菜单使用vue-router刷新后高亮显示不一致完美解决办法
weixin_42661283的博客
05-15 6131
问题1：刷新后，默认高亮显示为当前的第一个索引值 产生原因： :default-active="activeIndex" 解决办法：将:default-active="activeIndex" 替换成 :default-active="$route.path" 问题2：改完:default-active="$route.path"后发现高亮不显示，需要双击对...
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
element-ui 2.15.14版本
10-09
免费下载、免费下载、免费下载，下载后挂载nginx、tomcat、apache服务器下运行，也可以使用vs code打开使用live server访问
HTML+Element-ui邮件管理前端界面
07-12
若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui -->...
svelte-element-ui
02-16
什么是svelte-element-ui？ svelte-element-ui是基于Svelte的element-ui组件库。 安装 从npm安装。 npm install svelte-element-ui 在svelte文件中导入css。 < script lang =" ts " > import 'svelte-...
element-ui资源包
08-03
前端使用非常多的element-ui，直接将文件夹拷入到项目中即可
element UI中使用导航栏配置router后无法高亮
l1002670137的博客
09-19 553
解决组件库侧栏配置router后点击没有高亮显示的问题
点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题
qq_39918566的博客
05-12 1209
一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。 二、实现过程 使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分： <!-- 顶栏菜单 activeIndex是data里面的一个参数--> <el-menu router :default-acti
【jq】手风琴三级侧边栏目点击高亮
Dust storm的博客
01-10 307
手风琴三级侧边栏目点击高亮
如何实现侧边栏高亮
liwenrou的博客
07-02 993
一、背景介绍侧边栏高亮是指选择侧边栏菜单时有一个样式效果,当刷新页面的时候,这个效果还在.二、知识剖析侧边栏高亮有很多种实现方法.目前大部分是使用localStorage和sessionStorage来实现三、常见问题如何实现高亮的?四、解决方案侧边栏高亮有很多种实现方法,在复盘项目中，我使用判断当前url和点击选项的url来实现子模块的状态保存。html为&lt;uib-accordion cl...
解决element-ui中导航栏常亮不跟随页面路由
一李
10-21 888
在项目中使用elementui框架中的路由。其中default-active控制导航栏栏目是否跟随页面亮。 解决： 将default-active绑定自定义的path值，在方法中通过this.$route.path获取当前页面的路由，比对当前页面的路由和获取的路由是否相同，如果不相同，则跳转到指定的路由。 created() { this.path =this.$route.path } changeA(indexX){ if(this.$route.path !==ind
elementui table表格 点击行实现高亮
weixin_44348028的博客
10-07 2559
记得要将 highlight-current-row 高亮属性打开 <template> <el-table highlight-current-row :data="table1" :row-style="{height: '20px'}" :header-cell-style="{background:'#e6e6e6',color:'#000000'}" border style="width: 30%;"> <el-table-
解决element-ui侧边导航在页面刷新后失去高亮的问题
littlebearGreat——宁静致远
07-06 8679
element-ui  +  vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui  提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active  的值即可。下面是我写的配置文件/...
在vue项目中使用Element-ui时侧边栏首页高亮问题
weixin_51527055的博客
12-21 455
问题描述：当我们在做一个后台项目时，肯定有侧边栏的高亮问题，当我们在登录后会出现首页没有高亮显示。 解决方案：查看自己的首页路径对不，当你的首页路径为/11/22时，不能写默认路径，需跟他一样 ...
element-ui侧边栏点击事件
最新发布
03-28
在Element-UI中，侧边栏的点击事件可以通过使用路由来实现。当侧边栏的某个菜单项被点击时，可以通过路由跳转到相应的页面或执行相应的操作。 首先，你需要在侧边栏组件中定义菜单项，并为每个菜单项添加点击事件。例如： ```html <template> <div> <el-menu> <el-menu-item @click="handleClick('home')">首页</el-menu-item> <el-menu-item @click="handleClick('about')">关于</el-menu-item> <el-menu-item @click="handleClick('contact')">联系我们</el-menu-item> </el-menu> </div> </template> ``` 然后，在组件的methods中定义点击事件的处理函数。这个处理函数可以根据点击的菜单项的标识来执行相应的操作，比如跳转到对应的路由页面。 ```javascript <script> export default { methods: { handleClick(menuItem) { if (menuItem === 'home') { // 执行跳转到首页的操作 this.$router.push('/home'); } else if (menuItem === 'about') { // 执行跳转到关于页面的操作 this.$router.push('/about'); } else if (menuItem === 'contact') { // 执行跳转到联系我们页面的操作 this.$router.push('/contact'); } } } } </script> ``` 这样，当侧边栏的菜单项被点击时，会触发相应的点击事件处理函数，根据菜单项的标识来执行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值