vue router-link的字体改变颜色

Vue Router Link 的 `v-link` 或 `router-link` 组件默认会使用元素的 `color` 样式来显示链接的颜色。如果你想在激活或选中某个链接时改变字体颜色，你可以通过 CSS 选择器和伪类来实现。例如：

1. 非active状态下的链接颜色：

<router-link :to="{ name: 'your-route' }" class="link">
  Your Text
</router-link>

<style>
.link {
  color: #000; /* 默认颜色 */
}
</style>

2. 当链接被激活（用户已导航到该页面）时，可以设置 `router-link-active` 伪类：

<router-link :to="{ name: 'your-route' }" class="link">
  Your Text
</router-link>

<style>
.link {
  color: #000;
}

.link.router-link-active {
  color: red; /* 当链接被激活时，颜色变为红色 */
}
</style>

3. 使用 Vue 的 `$route` 对象监听路由变化：

<template>
  <router-link :to="{ name: 'your-route' }" class="link" :class="{ active: $route.name === 'your-route' }">
    Your Text
  </router-link>
</template>

<style>
.link {
  color: #000;
}

.link.active {
  color: blue; /* 当路由匹配时，颜色变为蓝色 */
}
</style>

在这个例子中，`:class="{ active: $route.name === 'your-route' }"` 会根据当前路由是否与指定的路由名匹配来动态添加 `active` 类。