Vue Router RouterOptions（linkActiveClass、linkExactActiveClass）

如果你希望快速了解他们，请翻到文章底部查看视频。
在这里插入图片描述

`linkActiveClass`介绍

可选 linkActiveClass: string

linkActiveClass在路由配置中使用

const router = createRouter({linkActiveClass: 'menu-active'
})

设置了 `linkActiveClass` 会有什么效果

匹配当前路由的 RouterLink 默认的 CSS class。如果没有提供，则会使用 router-link-active。

<!--浏览器元素审查结果before:摘抄自vue3项目快速构建：npm create vue@latest当前页面：http://localhost:5173/ 即 Home页面可见样式如下
-->
<a data-v-7a7a37b1="" href="/" 
class="router-link-active router-link-exact-active" 
aria-current="page">Home</a><a data-v-7a7a37b1="" href="/about" class="">About</a>

代码示例

<!-- App.vue -->
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink><!-- router/index.ts -->
const router = createRouter({history: createWebHistory(),routes,strict: true,linkActiveClass: 'menu-active'
})

<!--浏览器元素审查结果after:配置了 linkActiveClass: 'menu-active' 效果
-->
<a data-v-7a7a37b1="" href="/" class="menu-active router-link-exact-active" aria-current="page">Home</a><a data-v-7a7a37b1="" href="/about" class="">About</a>

可见当前匹配路由添加了menu-active自定义类名，并覆盖了默认router-link-active。
作用：可以在不污染原生的router-link-active样式的的情况下，书写自定义的路由聚焦样式，实现样式自由。

提供一个简单明显的样式参考

/* App.vue */
<style lang="css">.menu-active {color: #f60;font-weight: bold;}
</style>

效果图

注意：由于内置样式优先级较高，或许你需要这么处理

   /* App.vue */<style lang="css">.menu-active {color: #f60 !important;font-weight: bold;}</style>

图示

`linkActiveClass`对子路由有同等的效果

给 about 添加子路由 details

router/index.ts

{path: '/about',name: 'about',component: () => import('../views/About.vue'),children: [{path: 'detail',component: () => import('../views/AboutDetail.vue')}]
}

About.vue

<template><div class="about">About page<br /><router-link to="/about/details">go to detail page</router-link><router-view></router-view></div>
</template>

AboutDetail.vue

<template><div class="detail"><h1>this is a  about details page 🐊</h1></div>
</template><style scoped>
.detail {font-size: 26px;
}
</style>

效果图

还可以通过`RouterLinkProps`实现

将路由配置选项注释掉

const router = createRouter({// linkActiveClass: 'menu-active',
})

采用RouterLinkProps实现
- 可选 activeClass: string
- 链接在匹配当前路由时被应用到 class。
- 业务代码更新：
```
<RouterLink to="/" active-class="menu-active" >Home</RouterLink>
<RouterLink to="/about"  active-class="menu-active">About</RouterLink>
```
- 实现效果是等效的

`linkExactActiveClass`介绍

可选 linkExactActiveClass: string

linkExactActiveClass在路由配置中使用

const router = createRouter({linkExactActiveClass: 'menu-exact-active'
})

设置了`linkExactActiveClass`会有什么效果

严格匹配当前路由的 RouterLink 默认的 CSS class。如果没有提供，则会使用 router-link-exact-active。

<!--浏览器元素审查结果before:
-->
<a data-v-7a7a37b1="" href="/" class="router-link-active router-link-exact-active" aria-current="page">Home</a><a data-v-7a7a37b1="" href="/about" class="">About</a>

代码示例

<!-- App.vue -->
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink><!-- router/index.ts -->
const router = createRouter({history: createWebHistory(),routes,strict: true,linkExactActiveClass: 'menu-exact-active',
})

<!--浏览器元素审查结果after:配置了 linkExactActiveClass: 'menu-exact-active' 效果
-->
<a data-v-7a7a37b1="" href="/" class="router-link-active menu-exact-active" aria-current="page">Home</a><a data-v-7a7a37b1="" href="/about" class="">About</a>

可见当前匹配路由添加了menu-exact-active自定义类名，并覆盖了默认router-link-exact-active。
作用：可以在不污染原生的router-link-exact-active样式的的情况下，书写自定义的路由聚焦样式，实现样式自由。

提供一个简单明显的样式参考

/* App.vue */
<style lang="css">.menu-exact-active {color: #ff0;font-weight: bold;}
</style>

效果图

两者同时使用会有什么效果？

在 Vue Router 中，linkActiveClass 和 linkExactActiveClass 的区别主要体现在它们应用的场景和逻辑上：

linkActiveClass：
- 当某个 <router-link> 的目标路由与当前路由部分匹配时（包括子路由），Vue Router 会自动给该 <router-link> 添加 linkActiveClass 指定的类名，默认是 router-link-active。
- 例如，如果有一个路由 /products，且当前路径是 /products/detail，那么 <router-link to="/products"> 会被激活，并添加 router-link-active 类名。
linkExactActiveClass：
- 当某个 <router-link> 的目标路由与当前路由完全匹配时（不包括子路由），Vue Router 会自动给该 <router-link> 添加 linkExactActiveClass 指定的类名，默认是 router-link-exact-active。
- 例如，如果有一个路由 /products，且当前路径也是 /products，那么 <router-link to="/products"> 会被激活，并添加 router-link-exact-active 类名。

linkActiveClass 适用于当前路由与目标路由部分匹配的情况，包括子路由。
linkExactActiveClass 适用于当前路由与目标路由完全匹配的情况，不包括子路由。

🎥 视频展示

linkActiveClass

以上就是对Vue Router 的linkActiveClass和linkExactActiveClass简单介绍。如果你有更好的玩法，不妨在评论区留言。

Vue Router RouterOptions（linkActiveClass、linkExactActiveClass）