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` 属性来实现。

例如，你可以这样设置：

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

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

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

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

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

<router-link> 怎么重定向到本页面并使数据改变

首先需要明确一点，<router-link> 是用来进行路由跳转的标签，它本身并不能改变数据。如果你想要在跳转到本页面时改变数据，可以通过以下两种方式实现：

1. 使用 Vue Router 的导航守卫（beforeRouteEnter 或 beforeRouteUpdate），在路由跳转前或更新前修改数据。

2. 在跳转时传递参数，在本页面中通过接收参数的方式来改变数据。可以在 <router-link> 标签中使用 to 属性传递参数，例如：

<router-link :to="{path: '/', query: {data: 'hello'}}">跳转到本页面并传递参数</router-link>

在本页面中可以通过 $route.query.data 来获取参数，并根据参数来修改数据。