如何 VueJS 路由器链接活动样式

:active pseudo-class 与添加类来设置元素样式不同。

:active CSS 伪类表示用户正在激活的元素（例如按钮）。使用鼠标时，“激活”通常在按下鼠标按钮时开始，在松开鼠标按钮时结束。

我们正在寻找的是一个类，例如 .active，我们可以使用它来设置导航项的样式。

有关 :active 和 .active 之间区别的更清晰示例，请参见以下代码段：

li:active { 背景颜色：#35495E; } li.active { 背景颜色：#41B883; }

• :active (pseudo-class) - 点击我！
• .active (class)

Vue路由器

vue-router 自动将两个活动类 .router-link-active 和 .router-link-exact-active 应用到 <router-link> 组件。

路由器链接活动

当目标路由匹配时，此类会自动应用于 <router-link> 组件。

其工作方式是使用包容性匹配行为。例如，只要当前路径以 /foo/ 开头或为 /foo，<router-link to="/foo"> 就会应用此类。

因此，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar">，当路径为 /foo/bar 时，这两个组件都会获得 router-link-active 类。

路由器链路精确激活

当 <router-link> 组件的目标路由为 exact 匹配时，此类会自动应用到该组件。考虑到在这种情况下，router-link-active 和 router-link-exact-active 这两个类都将应用于组件。

使用相同的示例，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar">，则router-link-exact-active类将仅应用于 <router-link to="/foo/bar"> 当路径为 /foo/bar 时。

确切的道具

假设我们有 <router-link to="/">，将会发生的情况是该组件将对每条路线都处于活动状态。这可能不是我们想要的，所以我们可以像这样使用 exact 属性：<router-link to="/" exact>。现在，只有在 / 完全匹配时，组件才会应用活动类。

CSS

我们可以使用这些类来设置元素的样式，如下所示：

 nav li:hover,
 nav li.router-link-active,
 nav li.router-link-exact-active {
   background-color: indianred;
   cursor: pointer;
 }

使用 tag 属性 <router-link tag="li" /> 更改了 <router-link> 标记。

全局更改默认类

如果我们希望全局更改 vue-router 提供的默认类，我们可以通过将一些选项传递给 vue-router 实例来实现，如下所示：

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

更改每个组件实例的默认类 ()

如果我们想要更改每个 <router-link> 的默认类而不是全局的，我们可以使用 active-class 和 exact-active-class 属性来实现，如下所示：

<router-link to="/foo" active-class="active">foo</router-link>

<router-link to="/bar" exact-active-class="exact-active">bar</router-link>

v-slot API

Vue Router 3.1.0+ 通过 scoped slot 提供低级自定义。当我们希望设置包装元素的样式时，这很方便，例如列表元素 <li>，但仍将导航逻辑保留在锚元素 <a> 中。

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

---

创建路由器时，您可以指定 linkExactActiveClass 作为属性来设置将用于活动路由器链接的类。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

这已记录在案 here。

---

https://router.vuejs.org/en/api/router-link.html 添加属性 active-class="active" 例如：

<ul class="nav navbar-nav">
    <router-link tag="li" active-class="active" to="/" exact><a>Home</a></router-link>
    <router-link tag="li" active-class="active" to="/about"><a>About</a></router-link>
    <router-link tag="li" active-class="active" to="/permission-list"><a>Permisison</a></router-link>
</ul>

---

只需添加到@Bert 的解决方案以使其更清晰：

    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active" // active class for *exact* links.
})

如您所见，应删除此行：

linkActiveClass: "active", // active class for non-exact links.

这样，只有当前链接是高亮的。这应该适用于大多数情况。

大卫

---

正如@Ricky 上面提到的，vue-router 自动将两个活动类 .router-link-active 和 .router-link-exact-active 应用到 <router-link> 组件。

因此，要更改活动链接 css，请使用：

.router-link-exact-active {
  //your desired design when link is clicked
  font-weight: 700;
}

---

让我们把事情简单化，你不需要阅读关于“自定义标签”的文档（作为一个 16 年的 web 开发人员，我有足够的这种标签，例如在 struts、webwork、jsp、rails 中，现在它是 vuejs )

只需按 F12，您将看到如下源代码：

<div>
  <a href="#/topologies" class="luelue">page1</a> 
  <a href="#/" aria-current="page" class="router-link-exact-active router-link-active">page2</a> 
  <a href="#/databases" class="">page3</a>
</div>

所以只需为 .router-link-active 或 .router-link-exact-active 添加样式

如果您想了解更多详细信息，请查看 router-link api：https://router.vuejs.org/guide/#router-link

---