ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示

2024-05-08 19:03:59

原因：当路由地址发生变化时，想要对应的高亮显示的菜单项发生变化，只需要设置 :default-active="$route.path"即可，但是当跳转的路由(父路由)包含子路由(即包含另一个导航时)，且父路由设置了默认显示的子路由，此时父路由对应的菜单项就无法正常高亮显示，因为父路由设置了默认显示的子路由，当前路由地址就变成了子路由的地址，而菜单项高亮显示的路由对应的路由地址为父亲路由，而不是子路由所以无法高亮显示，简单来说本来 /aaa 应该高亮显示菜单项，但现在实际的路由地址为 /aaa/bbb，所以无法高亮显示。

解决方法一：计算属性+$route.path+meta属性

① 在子路由中添加meta属性，设置需要高亮显示的路由地址

routes: [{path: '/aaa',component: AAA,redircct:'/aaa/bbb'children: [{path: 'bbb',component: BBB,meta: {activeMenu: '/aaa'}]}
]

② 将default-active的值设置为计算属性

<el-menuclass="sidebar-el-menu":default-active="onRoutes":collapse="collapse"text-color="#fff"active-text-color="#fff"background-color="#0e0d0a"unique-opened:router="true">
</el-menu>

③ 在计算属性中判断路由是否有meta属性，如果有则返回meta属性中设置的高亮显示的路由地址，如果没有则返回$route.path

export default {computed: {onRoutes() {const route = this.$routeconst { meta, path } = route// 在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示// meta中 有activeMenu 字段的子页面，都会显示高亮if (meta.activeMenu) {return meta.activeMenu}return path}}
}

方法二：非添加meta属性

将default-active的值设置为计算属性，然后在计算属性中直接判断 r o u t e . p a t h 是否是以 / x x x 开头的 ( / x x x 是父路由的路由地址 ) ，如果是以 / x x x 开头的则返回对应的 / x x x , 否则返回 route.path是否是以 /xxx 开头的(/xxx 是父路由的路由地址)，如果是以 / xxx 开头的则返回对应的 /xxx ,否则返回 route.path是否是以/xxx开头的(/xxx是父路由的路由地址)，如果是以/xxx开头的则返回对应的/xxx,否则返回route.path

<el-menuclass="sidebar-el-menu":default-active="onRoutes":collapse="collapse"text-color="#fff"active-text-color="#fff"background-color="#0e0d0a"unique-opened:router="true">
</el-menu>

activeMenu() {// 获取path地址const path = this.$route.path// 判断path地址是否是以/xxx开头的(/xxx 为对应显示的一级路由的导航的路由地址)if (path.startsWith('/tools')) {// 如果是则返回一级路由的导航的路由地址return '/tools'}return path}

ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示相关推荐

element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
React Ant Design Menu导航菜单跳转
昨天小编在学习React使用Ant Design Menu导航菜单时,发现Ant Design4.2版本之后的 Menu 导航菜单更新了写法.新写法不再需要自行拼接 JSX,直接采用数组写法直接用 i ...
element ui路由配置文件_element-ui使用导航栏跳转路由的用法详解
最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考首先复制官网的例子,在这基础上 ...
公众号如何跳转到页面php,图文详解微信公众号开发自定义菜单跳转页面并获取用户信息实例...
这篇文章主要介绍了微信公众号开发自定义菜单跳转页面并获取用户信息实例详解的相关资料,需要的朋友可以参考下微信公众号开发自定义菜单请先读完本文再进行配置开发请先前往微信平台开发者文档阅读&qu ...
ruoyi是怎么点击菜单跳转页面的_电商后台设计：系统管理、菜单管理
文章对系统管理和菜单管理的设计过程以及其中的业务逻辑展开了讲解,主要适合从事互联网产品设计.技术研发以及产品运营人员学习. 对于绝大数后台管理系统功能管理应该是它的重点,系统中涉及大量的功能模块,能够 ...
html页面跳转时导航栏不变_解决Vue-iview封装导航栏刷新，导航栏消失之坑
1.前言记录一次跳转路由时,导航栏选中消失的神秘事件. 2.事情原图请看这张图,一开始路由跳转到这页面时,导航栏是有高亮的,但是在刷新的时候,高亮就消失了: 总所周知,客户是一种可以从鸡蛋里面挑出 ...
微信公众号开发--自定义菜单跳转页面并获取用户信息(续)
之前写过一篇微信公众号开发–自定义菜单跳转页面并获取用户信息由于当时是刚学习微信公众号开发当时的思路虽然可行,不过不是最好的,最近也用到了需要获取用户信息的地方,再次整理一下. 流程注意点 ### ...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...

最新文章

热门文章