Vue-路由导航菜单栏的高亮设置

最新推荐文章于 2025-07-10 16:26:03 发布

转载最新推荐文章于 2025-07-10 16:26:03 发布 · 2.1k 阅读

文章标签：

#路由

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Vue Router时，自定义导航菜单的激活状态样式。默认情况下，Vue Router会给当前激活的菜单项添加特定的类名，但我们可以使用linkActiveClass属性来更改这一行为，实现个性化的菜单高亮效果。

默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact-active 和router-link-active 类。
我们可以通过 linkActiveClass 来修改 router-link-active 这个类名，
在路由规则配置中添加配置项linkActiveClass: ‘mui-active’，通过’mui-active’来自定义控制菜单栏切换样式

原文：https://blog.youkuaiyun.com/qq_21796899/article/details/78514198

var router=new VueRouter({
routes:[

],
linkActiveClass:‘mui-active’ //覆盖默认的路由高亮类 router-link-active
})