: active 伪类与添加类来设置元素样式不同。
: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自动将两个活动类.router-link-active和应用.router-link-exact-active到<router-link>组件。
<router-link>当组件的目标路由匹配时，此类会自动应用于组件。
其工作方式是使用包容性匹配行为。例如，<router-link to="/foo">只要当前路径以/foo/or开头，就会应用此类/foo。
因此，如果我们有<router-link to="/foo">和，当路径为 时<router-link to="/foo/bar">，两个组件都会获得该类。router-link-active/foo/bar
<router-link>当组件的目标路由完全匹配时，此类会自动应用于组件。考虑到在这种情况下，两个类router-link-active和router-link-exact-active都将应用于组件。
使用相同的示例，如果我们有<router-link to="/foo">and <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;
}
使用道具<router-link>更改了标签， .tag<router-link tag="li" />
全局更改默认类
如果我们希望更改vue-router全局提供的默认类，我们可以通过将一些选项传递给vue-router实例来实现，如下所示：
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
更改每个组件实例的默认类 ( <router-link>)
相反，如果我们想要更改每个而不是全局的默认类，我们可以通过使用和属性<router-link>来做到这一点，如下所示：active-classexact-active-class
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
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>
