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）