router-link-active

"router-link-active" 是 Vue.js 中的一个指令，用于表示当前激活的路由链接。它通常与 `v-bind:class` 或 `:class` 进行配合使用，以在路由链接处添加 CSS 类。

相关问题

router-link-active router-link-exact-active有什么用

router-link-active和router-link-exact-active是Vue路由中的两个类名，用于在路由切换时添加到对应的链接元素上。它们的作用如下：

1. router-link-active：当当前路由与链接的路由匹配时，会自动添加router-link-active类名。这样可以方便地为当前激活的链接添加样式，以突出显示当前页面所在的导航栏链接。

2. router-link-exact-active：与router-link-active类似，但只有在当前路由与链接的路由完全匹配时才会添加router-link-exact-active类名。这样可以确保只有在完全匹配时才会激活链接，避免了部分匹配时也会激活链接的情况。

下面是一个示例，演示了如何使用router-link-active和router-link-exact-active：

<template>
  <div>
    <router-link to="/" exact class="nav-link" active-class="active">Home</router-link>
    <router-link to="/about" class="nav-link" active-class="active">About</router-link>
    <router-link to="/contact" class="nav-link" active-class="active">Contact</router-link>
  </div>
</template>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

在上述示例中，当当前路由与链接的路由匹配时，会自动添加active类名，从而应用样式。注意，我们可以通过active-class属性来指定自定义的类名。

vue中的.router-link-active和.router-link-exact-active什么意思

在Vue中，.router-link-active和.router-link-exact-active是用于样式控制的类名。这些类名可以用于给当前活动的路由链接添加样式。

.router-link-active类名会在当前路由链接的路径与当前路由匹配时被添加到元素上。例如，当访问路径为"/"时，具有to="/"的<router-link>元素会被添加.router-link-active类名。\[2\]

而.router-link-exact-active类名则会在当前路由链接的路径与当前路由完全匹配时被添加到元素上。例如，当访问路径为"/"时，具有to="/"且带有exact修饰符的<router-link>元素会被添加.router-link-exact-active类名。\[1\]

通过为这些类名添加样式，我们可以在活动的路由链接上应用特定的样式，以提高用户体验或突出显示当前所在的页面。
#### 引用[.reference_title]
- *1* *2* [router-link-active 与 router-link-exact-active 区别](https://blog.csdn.net/OJNBO_1/article/details/129475223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue路由中的router-link-exact-active和router-link-active](https://blog.csdn.net/zyz00000000/article/details/88713716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]