element UI导航栏 + vue-router实现单页面应用中的组件跳转时导航栏上的高亮问题

最新推荐文章于 2023-11-09 15:30:51 发布

原创最新推荐文章于 2023-11-09 15:30:51 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element vue 导航栏

学习专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Element UI的el-menu中实现导航栏高亮的问题，特别是在使用路由和v-if导致高亮失效的情况下，通过将v-if替换为v-show成功解决了这一难题。

高亮问题

在element导航栏 el-menu里的API default-active 绑定Menu-Item中的API index 当对应的路由切换时高亮对应的导航栏。
现在的情况我有4个路由前面两个路由给分配导航栏后面两个不分配导航栏。在路由配置里加个isHidden属性来判断是否渲染导航栏。后面两个路由是由前面两个路由通过 $router.push()过去。然后通过vue-bus改变父级组件的 default-active属性。
问题出现了导航栏绑定的高亮index 改变了但是导航栏的高亮没有变化
因为在menu-item里是通过v-if 判断isHidden属性是否显示对应路由导航。把v-if 换成v-show 完美解决问题。