的：有源伪类是不一样的添加类到风格的元素。
：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/或为开头，就会应用该类/foo。
因此，如果我们拥有<router-link to="/foo">and <router-link to="/foo/bar">，则router-link-active当path为时，两个组件都将获得该类/foo/bar。
<router-link>当其目标路线完全匹配时，此类将自动应用于组件。请注意，在这种情况下，类router-link-active和router-link-exact-active都将应用于组件。
使用相同的示例，如果我们有<router-link to="/foo">and <router-link to="/foo/bar">，则仅在path为时才应用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-classandexact-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+通过作用域插槽提供低级定制。当我们希望对包装元素（如list元素）进行样式设置<li>但仍将导航逻辑保留在anchor元素中时，这很方便<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>
