router-link 选中和没选中的样式

您可以通过 `router-link` 组件提供的 `active-class` 和 `exact-active-class` 属性来为选中和精确匹配的链接设置不同的样式类。以下是一个例子：

<router-link to="/" active-class="active" exact-active-class="exact-active">Home</router-link>
<router-link to="/about" active-class="active" exact-active-class="exact-active">About</router-link>

在上面的例子中，当路由匹配到 `/` 或 `/about` 时，对应的 `router-link` 元素将会添加 `active` 类。如果只有路由精确匹配到 `/` 或 `/about` 时，对应的 `router-link` 元素将会添加 `exact-active` 类。这样您就可以针对不同的状态设置不同的样式类了。例如：

/* 未选中状态 */
.router-link {
  color: #999;
}

/* 选中状态 */
.router-link.active {
  color: #f00;
  font-weight: bold;
}

/* 精确匹配选中状态 */
.router-link.exact-active {
  color: #00f;
  text-decoration: underline;
}

在上面的 CSS 中，我们定义了三个样式类：`.router-link` 表示未选中状态下的样式，`.router-link.active` 表示选中状态下的样式，`.router-link.exact-active` 表示精确匹配选中状态下的样式。这样，在不同状态下，`router-link` 元素的样式就会随之变化。