vue elementui el-menu 在三级页面路径下所在导航不会高亮

最新推荐文章于 2024-05-09 13:56:15 发布

lsylxx

最新推荐文章于 2024-05-09 13:56:15 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/lsylxx/article/details/131659147

版权

首先在router中设置meta-name，相同目录下name相同

第二就是el-menu导航的default-active和el-menu-item的index要保持一致

需要注意的地方：index可以是路由router，也可以是其他值，在没动态设置:route时 index就是代表路由

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lsylxx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue elementui el-menu 在三级页面路径下所在导航不会高亮

需要注意的地方：index可以是路由router，也可以是其他值，在没动态设置:route时 index就是代表路由
复制链接

扫一扫

vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题

weixin_39783915的博客

12-19

1236

问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...

vue element-ui 三级路由 router.js的配置文件

weixin_41033048的博客

02-15

855

问题回顾：我已经按照网上说的方法，配了很多的次内容，一直搞不清楚是什么问题？配了两个component:Layout，效果显示如下：而如果去掉一个呢？就会变成这样起码这个已经解决了导航条嵌套的问题，所以我们应该明白，问题出现在Layout的上面， layout这块是整个主页面的路由的，解决方法：新建vue槽，装子路由的内容最后的代码如下： ...

参与评论您还未登录，请先登录后发表或查看评论

关于vue路由嵌套时父子路由高亮显示的问题

Sxf_my的博客

07-30

1258

关于vue路由嵌套时父子路由高亮显示的问题背景基于@vue-cli 4.4.6新创建了一个项目，在about页面中引入二级路由配置 ![app.vue中的模板布局](https://img-blog.csdnimg.cn/20200730171713532.png) ![about.vue中的模板布局](https://img-blog.csdnimg.cn/20200730171802260.png) 然后是router文件夹下对路由的配置 ![路由配置文件](https://img-blog.csd

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理(1)

最新发布

2401_84411323的博客

05-09

756

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},text: ‘三级菜单2’,},text: ‘三级菜单3’,},text: ‘三级菜单4’,},id: ‘99’,pid: ‘-1’,text: ‘公司官网’,菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。

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。

element admin 添加三级路由

m0_50302965的博客

10-25

181

todo。

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

weixin_44816197的博客

01-04

1564

右边跳转路由，左边的红色高亮就消失了。先看一下 el-menu里的两个配置项这两个配置项可以知道这个 index也就是跳转路由的路径然后在配置路由的js文件里下面的/learningStatisticsDetails是在上面的/learningStatistics里面跳转的，这样设置之后，跳转到/learningStatisticsDetails里，/learningStatistics这个部分也是激活状态的，导航栏的高亮部分就不会消失了^ ^ ...

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...

vue使用ElementUI时导航栏默认展开功能的实现

08-27

Vue 使用 ElementUI 时导航栏默认展开功能的实现知识点： 1. ElementUI 导航栏默认展开功能的实现原理在使用 ElementUI 时，默认情况下，导航栏是不能展开的。这是因为 ElementUI 的设计理念是让用户手动展开...

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

11-19

最后，当处理三级菜单时，我们可以在二级菜单的`el-submenu`内再嵌套一层`el-submenu`或者`el-menu-item`，根据实际需求来决定是否需要三级菜单。例如： ```html <el-submenu :index="child.path" v-if="child.z &&...

解决vue项目刷新后,导航菜单高亮显示的位置不对问题

12-13

现在是点击第三个页面刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态；捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分；在头部组件里面...

Vue页面手动刷新,实现导航栏激活项还原到初始状态

10-14

在实际应用中，当用户通过导航在不同页面间切换时，通常希望保持导航栏的状态，如高亮显示当前选中的菜单项。然而，当页面被手动刷新时，由于Vue实例会被重新创建，这些状态可能丢失。为了解决这个问题，我们可以...

elment el-menu当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover三级菜单后，二级菜单无法自动收回

qq_38778882的博客

04-24

628

参考文章：https://blog.csdn.net/ych6666/article/details/122539355。将el-submenu的属性 popper-append-to-body去掉。

在使用element-ui中的多级菜单中遇到的问题

归零

12-13

5096

在使用element-ui中的多级菜单中遇到如下问题：项目不会报错，只是显示warning，大概的意思是传递prop的类型检测要求是boolean类型，但是传入的是字符串类型。但是这样子看着很别扭，所以就开始找原因在项目中是这样写的： element-ui中的要求：这里看的确是写成了boolean类型，但其实vue在解析的过程中是以字符串的形式来进行解析的（之前好像有看过，也正是这样，...

Vue中使用el-menu高亮显示问题

weixin_43336525的博客

08-28

2210

在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示

使用element-ui导航，进入对应的三级页面菜单保持点击状态

weixin_60196946的博客

09-04

971

01.路由中使用了keepAlive属性，要用keepAlive：true，不能等于false，使用false页面会刷新。

el-menu 绑定路由：跳转到二级路由时保持一级菜单高亮

PhoenixGuangyu的博客

05-23

1023

判断当前路由path是否包含el-menu router中的path。使用到字符串的match方法。并设置一个拥有高亮效果的类。但是这样设置有一个问题，当我们跳转到二级路由的时候，el-menu就会失去is-active类名，高亮效果也就随即消失。这里代码实现很简单，只需要使用深度选择器找到el-menu上的is-active，修改相应的样式即可。需求：在当前菜单项进行操作时，保持一级菜单高亮。

elementUI三级菜单，可添加子菜单，可修改可删除

Sun_ziran的博客

05-28

957

【代码】elementUI三级菜单，可添加子菜单，可修改可删除。

vue导航菜单，一级路由，二级路由

LuckyMon的博客

02-27

8524

route 直接引入 import HelloWorld from '@/components/HelloWorld' {path: 'HelloWorld', name: 'HelloWorld', component:HelloWorld} 优势在于简洁明了，适用于少量的路由，但是大量路由时，比较占用资源懒加载 {path: 'HelloWorld', name: 'HelloWorld'...

Vue el-menu高亮设置及点击菜单项实现路由跳转

07-17

Vue的el-menu组件可以通过设置`default-active`属性来实现高亮当前选中的菜单项，而实现点击菜单项跳转路由可以通过设置`router`属性和使用`router-link`组件来实现。首先，设置el-menu组件的`default-active`属性，将其绑定到Vue实例中的一个data属性，例如`activeMenu`： ```html <template> <div> <el-menu :default-active="activeMenu"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/about">关于</el-menu-item> <el-menu-item index="/contact">联系我们</el-menu-item> </el-menu> <router-view></router-view> </div> </template> <script> export default { data() { return { activeMenu: '/home' // 默认选中首页菜单项 } } } </script> ``` 然后，在路由配置中，使用Vue Router的`router-link`组件来实现点击菜单项跳转路由。在每个菜单项上使用`router-link`组件，将其绑定到相应的路由路径： ```html <template> <div> <el-menu :default-active="activeMenu"> <el-menu-item index="/home"> <router-link to="/home">首页</router-link> </el-menu-item> <el-menu-item index="/about"> <router-link to="/about">关于</router-link> </el-menu-item> <el-menu-item index="/contact"> <router-link to="/contact">联系我们</router-link> </el-menu-item> </el-menu> <router-view></router-view> </div> </template> ``` 这样，点击菜单项时会根据`router-link`中的`to`属性自动跳转到对应的路由，并且el-menu组件会根据当前路由的路径自动高亮对应的菜单项。请注意，以上代码中的el-menu和router-view是使用了Element UI库和Vue Router插件，你需要在项目中引入并正确配置它们。

vue elementui el-menu 在三级页面路径下 所在导航不会高亮

vue elementui el-menu 在三级页面路径下所在导航不会高亮