el-menu 导航栏菜单 当右边的内容部分跳转路由，导航栏高亮的部分不亮了

最新推荐文章于 2023-09-26 22:03:43 发布
最新推荐文章于 2023-09-26 22:03:43 发布
阅读量1.5k 收藏 5
点赞数 1
分类专栏： Vue使用Element-UI 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44816197/article/details/122301976
版权

在这里插入图片描述
右边跳转路由，左边的红色高亮就消失了。

先看一下 el-menu里的两个配置项
在这里插入图片描述在这里插入图片描述

这两个配置项可以知道这个 index也就是跳转路由的路径

在这里插入图片描述
在这里插入图片描述

然后在配置路由的js文件里
在这里插入图片描述
下面的/learningStatisticsDetails是在上面的/learningStatistics里面跳转的，这样设置之后，跳转到/learningStatisticsDetails里，/learningStatistics这个部分也是激活状态的，导航栏的高亮部分就不会消失了^ ^

不准吃饭
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element ui 菜单右侧展开_elementui左侧多级菜单右侧内容区
weixin_40006133的博客
12-19 1253
菜单预览.png1、AsideBarclass="el-menu-vertical-demo"router:default-active="activeMenu"background-color="#263238"text-color="#8a979e"active-text-color="#fff">v-for="router in routers":router="router":key...
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI点击NavMenu的一个菜单，跳转到另一个页面，菜单，头部消失
Cao_Mary的博客
08-25 3720
使用elementUI的NavMenu，点击菜单时，有时需要跳转到另一个页面后，菜单，头部消失，就像一个新开的页面。 解决方法： 在新页面的组件中，使用css实现，如下： <template> <div class="direct"> </div> </template> <script> export default { name: 'Direct', } </script> <style scoped lang
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
小张与BUG
10-08 4346
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
element NavMenu导航菜单 禁止 高亮
NancyFyn的博客
04-07 838
切换二级菜单，禁止菜单高亮。
关于vue路由跳转，导航条不亮的问题解决方法~
Jack__2017的博客
11-15 1067
当嵌套首个路由时，导航条是亮的，跳转到子路由的就不亮了，之前用的是 :exact 属性 如：:exact="list.path==='/'?true:false"； 可以解决，但是这次路由是首页的嵌套，这个方法不好用了，改成这样的写法： export default new Router({ routes: [ { path: '/', // name: 'index', compo...
在vue中实现某一些路由页面隐藏导航栏的功能操作
01-21
为了将导航栏显示在每一个页面中，可以将导航栏与放在同一级显示，如下： ... <router></router> ...补充知识：vue+el-menu实现路由刷新和导航栏菜单状态保持（局部刷新页面） 一、菜单项激活状态
Vue结合路由配置递归实现菜单栏功能
11-20
为了处理菜单的激活状态，我们可以利用`el-menu`组件的`:default-active="$route.path"`属性，使其根据当前路由自动高亮选中相应的菜单项。 需要注意的是，虽然本文没有涉及代码的优化和菜单权限控制，但在实际项目...
详解Nuxt内导航栏的两种实现方式
10-15
在这个组件中，可以使用Element UI的`<el-menu>`组件创建水平导航栏，并通过`@click`事件和`$router.push()`方法处理路由跳转。 ```html <div id="nav-wrapper"> <el-menu :default-active="activeIndex" ...
vue elementui el-menu 在三级页面路径下 所在导航不会高亮
lsylxx的博客
07-11 292
需要注意的地方：index可以是路由router，也可以是其他值，在没动态设置:route时 index就是代表路由
路由切换之后默认高亮/刷新页面后导航栏路由与页面不一致问题终极方案
m0_56986233的博客
03-10 936
路由切换默认高亮 请注意，一定要保证你:default-active 路由的值 和你路由path的值相同 下面我列出方法，利用sessionStorage来解决这个问题 这是一些相关的值 :default-active="activePath" activePath: "", 绑定点击对象 <el-menu-item v-for="item in list" :key="item.id" :index="item.path"
ElementUI - 主页面--动态树&右侧内容管理
最新发布
Ying_hao_kun的博客
09-26 1248
el-menu {.logobox {.logoimg {注意事项：①要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
element ui NavMenu 导航菜单页面刷新时菜单选中状态丢失解决方法
weixin_45261457的博客
04-22 2887
element ui NavMenu 导航菜单一般做为后台管理系统的切换菜单，在选中菜单跳转页面时会有高亮提示用户选择的哪一个菜单，但是会出现的问题是在跳转页面之后用户如果刷新页面选中的高亮状态就会丢失，这时候只需要在官方给出的例子中做出一点小小的修改就可以实现。 官方提供： <el-menu-item index="1-1">选项1</el-menu-item> 修改后...
解决前端开发路由跳转之页面跳转，左侧菜单栏高亮显示跟随
weixin_58149434的博客
06-27 647
return {},methods: {},},if (index!== -1) {== -1) {} else {},
element-ui中NavMenu导航菜单路由跳转时无法切换菜单状态
太极梦龙的博客
11-19 5750
问题说明 使用element-ui的NavMenu导航菜单时发现一个问题,当在二级页面通过事件使用$router.push('/article')方法切回到article页面时,导航菜单无法正确显示当前页面的菜单项,还依旧停留在上个页面 问题解决: 从官网发现,该属性可以解决这个问题 在el-menu标签中添加该属性,并绑定该属性值为跳转页面的哈希值,从而实现当前页面的菜单激活 ok,问题...
解决 Vue 使用 vue-router 切换页面时 页面显示没有在顶部
青蛙king的博客
09-08 819
跳转到新页面后可视口没有从顶部开始显示，解决办法： router.beforeEach((to, from, next) => { /* 进入新页面自动回到页面顶部 */ // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 let userId = localStora
Element-UI侧边导航栏切换展示不同的右侧主体内容
欢迎来到长风沛雨的博客
03-11 3584
在用element做侧边栏遇到的问题，如果给每个按钮绑定一个值去用if判断有点麻烦了。看了下文档，是给 这个标签来一个router的属性。控制台就会报错它是一个字符串不是布尔值，但是它的路由是生效的= =这里是给User加了两个子组件，然后把子组件给侧边栏绑路由。那么为true的时候就是开启这个导航栏的路由了。把每个导航索引的路由绑成不一样的就好了思密达。但是直接给每个选项用router是会报错的。点击其他的，点击后的变色效果就同时生效。这个时候点了它就出来了，但是~
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
怡暘
08-03 3075
背景：在对项目进行bug走查的时候，测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新，当时我真的懵了，vue项目了router还能在当前页面进行再次刷新！！！我怀着疑惑上网查询、咨询足足使用了我3h，多宝贵的时间呀，就这么浪费掉了。最后，好歹，功夫不负有心人，还真有大佬讲到该部分的内容，通过自己尝试最终将问题解决。下面将我的问题解决方法分享给大家。 参考：https://blog.csdn.net/tq1711/article/details/108386307?utm_medium=distrib
el-menu及嵌套路由实现点击导航栏显示不同内容而导航栏不动功能
xuerwang的博客
07-18 9362
&lt;template&gt; &lt;div id="test"&gt; &lt;div id="container-fluid"&gt; &lt;!--顶部--&gt; &lt;div class="row head"&gt; &lt;div class="header"&g
假设你是高级前端开发工程师请我帮我看看为什么我这段代码，如果我停留在第三页views刷新会发生闪烁<el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"> <el-menu-item index="/">首页Home</el-menu-item> <el-menu-item index="/about/">第二页About</el-menu-item> <el-menu-item index="/three/">第三页views</el-menu-item> </el-menu>
07-10
从您提供的代码来看，您使用了Element UI的`<el-menu>`组件，并且通过`router`属性和`$route.path`来设置当前激活的菜单项。 根据您的描述，如果您停留在第三页`/three/`刷新会发生闪烁的问题，可能是因为刷新时路由的变化导致菜单项重新渲染，从而引起闪烁。 为了解决这个问题，您可以尝试对菜单项添加`exact`属性，确保路由匹配时才激活对应的菜单项。修改后的代码如下： ```vue <template> <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"> <el-menu-item index="/" exact>首页Home</el-menu-item> <el-menu-item index="/about/" exact>第二页About</el-menu-item> <el-menu-item index="/three/" exact>第三页views</el-menu-item> </el-menu> </template> ``` 通过添加`exact`属性，只有当路由完全匹配时，对应的菜单项才会激活。这样在刷新时不会出现闪烁现象。 希望这个解决方案能够解决您的问题！如果还有其他疑问，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值