The :活动伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/:active与添加类来设置元素的样式不同。
:active CSS 伪类表示一个元素（例如按钮）
正在被用户激活。使用鼠标时，“激活”
通常在按下鼠标按钮时开始，在以下时间结束
它被释放了。
我们要寻找的是一个类，比如.active，我们可以用它来设置导航项的样式。
有关之间差异的更清晰示例:active and .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自动应用两个活动类，.router-link-active and .router-link-exact-active，到<router-link>成分。
router-link-active https://v3.router.vuejs.org/api/#active-class
该类自动应用于<router-link>当组件的目标路由匹配时。
其工作方式是使用包容性匹配行为。例如，<router-link to="/foo">只要当前路径以以下开头，就会应用此类/foo/ or is /foo.
所以，如果我们有<router-link to="/foo"> and <router-link to="/foo/bar">，两个组件都会得到router-link-active当路径为/foo/bar.
router-link-exact-active https://v3.router.vuejs.org/api/#exact-active-class
该类自动应用于<router-link>当组件的目标路径是exact匹配。考虑到两个班级，router-link-active and router-link-exact-active，将应用于本例中的组件。
使用相同的示例，如果我们有<router-link to="/foo"> and <router-link to="/foo/bar">, the router-link-exact-active类会only被应用于<router-link to="/foo/bar">当路径是/foo/bar.
确切的道具 https://v3.router.vuejs.org/api/#exact
假设我们有<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;
}
The <router-link>标签已使用更改tag prop, <router-link tag="li" />.
全局更改默认类
如果我们希望更改提供的默认类vue-router在全球范围内，我们可以通过将一些选项传递给vue-router像这样的实例：
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
更改每个组件实例的默认类（<router-link>)
相反，如果我们想更改每个的默认类<router-link>并且不是在全球范围内，我们可以通过使用active-class https://v3.router.vuejs.org/api/#active-class and exact-active-class https://v3.router.vuejs.org/api/#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 https://v3.router.vuejs.org/api/#v-slot-api-3-1-0
Vue Router 3.1.0+ 通过以下方式提供低级定制作用域槽 https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots。当我们希望设置包装元素的样式（例如列表元素）时，这会很方便<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>
