如何 vue.js 路由链接活动样式

:active pseudo-class不同于添加一个类来设置元素的样式.

:active CSS伪类表示一个元素(例如按钮)

我们要找的是一个类，比如.active，我们可以用它来设计导航项的样式.

有关:active和.active之间差异的更清晰示例，请参见以下片段:

li:active {
  background-color: #35495E;
}

li.active {
  background-color: #41B883;
}

<ul>
  <li>:active (pseudo-class) - Click me!</li>
  <li class="active">.active (class)</li>
</ul>

Vue路由

vue-router自动将两个活动类.路由链路激活和.路由链路完全激活应用于103组件.

路由链路激活

当100组件的目标路径匹配时，该类将自动应用于100组件.

其工作方式是使用包容性匹配行为.例如，只要当前路径以/foo/或/foo开头，100就会应用这个类.

所以，如果我们有100和101，当路径为/foo/bar时，这两个组件都会得到路由链路激活类.

路由链路完全激活

当100组件的目标路由为exact匹配时，该类将自动应用于100组件.考虑到在这种情况下，路由链路激活级和路由链路完全激活级都将应用于组件.

使用相同的例子，如果我们有100和101，当路径为/foo/bar时，路由链路完全激活only类将应用于101.

确切的props

假设我们有100个，将会发生的是，该组件将在每条路由上都处于活动状态.这可能不是我们想要的，所以我们可以使用exactprops ，比如102.现在，只有在/处完全匹配时，组件才会应用活动类.

CSS

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

 nav li:hover,
 nav li.路由链路激活,
 nav li.路由链路完全激活 {
   background-color: indianred;
   cursor: pointer;
 }

The 100 tag was changed using the 101 prop, 102.

全局更改默认类

如果我们希望在全局范围内更改vue-router提供的默认类，我们可以将一些选项传递给vue-router实例，如下所示:

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

Change default classes per component instance (<router-link>)

相反，如果我们想更改默认的102类而不是全局类，我们可以使用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槽API

Vue Router 3.1.0+通过一个scoped slot的.当我们希望设计包装器元素(如列表元素<li>)的样式，但仍将导航逻辑保留在锚元素<a>中时，这很方便.

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && '路由链路激活', isExactActive && '路由链路完全激活']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>