router-link 路由重定向时样式没改变

当你使用 `router-link` 进行路由跳转时，如果你想要在跳转后改变链接的样式，你可以通过设置 `active-class` 属性来实现。

例如，你可以这样设置：

<router-link to="/home" active-class="active">首页</router-link>

然后在你的 CSS 文件中，添加 `.active` 类的样式：

.active {
  color: red;
  font-weight: bold;
}

这样，在你点击链接跳转到 `/home` 路由后，链接的样式就会变成红色加粗。

如果你的样式还是没有改变，你可以检查一下是否有其他样式优先级比较高，或者是否存在样式覆盖的情况。

相关问题

router-link 刷新页面路由重定向时样式没改变

如果你在使用 `router-link` 进行路由跳转时，页面刷新后样式没有改变，那么可能是因为你的路由配置中缺少了 `mode: "history"` 的配置。

在使用 `history` 模式时，路由跳转不会刷新整个页面，而是只会改变 URL，并且使用浏览器的 `history.pushState()` 方法来实现页面的前进和后退。

如果你没有设置 `mode: "history"`，那么路由跳转会使用默认的 `hash` 模式，这种模式下，每次路由跳转都会在 URL 中添加一个 `#` 号，页面会刷新并重新加载所有资源，因此你的样式也会重新加载，看起来就像没有改变一样。

因此，为了让你的路由跳转不刷新页面并且能够正确地改变样式，你需要在路由配置中添加 `mode: "history"` 的配置，例如：

const router = new VueRouter({
  mode: "history",
  routes: [
    // ...
  ]
})

这样，你的 `router-link` 跳转就可以不刷新页面并且能够正确地改变样式了。

router-link 刷新时路由重定向样式没改变

如果你使用 `router-link` 组件进行路由跳转时，刷新页面时样式没有改变，可能是因为你没有给相应的路由设置 `active-class` 或 `exact-active-class` 属性。

你可以在 `router-link` 标签上设置 `active-class` 或 `exact-active-class` 属性来指定路由激活时应该使用的样式类名，例如：

<router-link to="/" active-class="active">首页</router-link>

这里我们将 `active-class` 属性设置为 "active"，这意味着当路由的路径与当前页面的路径匹配时，该链接将被标记为 "active"。你可以在 CSS 中定义 "active" 类的样式。

如果你希望只有完全匹配当前路由路径时，该链接才被标记为 "active"，你可以使用 `exact-active-class` 属性：

<router-link to="/" exact-active-class="active">首页</router-link>

这里我们将 `exact-active-class` 属性设置为 "active"，这意味着只有当路由的路径完全匹配当前页面的路径时，该链接才被标记为 "active"。