router-link 不刷新

您好！对于 `router-link` 组件在路由切换时不刷新的问题，您可以尝试以下几种解决方案：

1. 使用 `exact` 属性：在 `<router-link>` 标签中添加 `exact` 属性可以确保只有在完全匹配时才会被激活。例如：`<router-link to="/" exact>Home</router-link>`。

2. 使用 `key` 属性：在 `<router-view>` 标签中添加 `:key` 属性并绑定一个唯一的值，这样在路由切换时会强制重新渲染组件。例如：`<router-view :key="$route.path"></router-view>`。

3. 使用 `beforeRouteUpdate` 钩子函数：如果您希望在路由参数发生变化时刷新组件，可以在组件中使用 `beforeRouteUpdate` 钩子函数。在该钩子函数中执行您需要的刷新操作。例如：

beforeRouteUpdate(to, from, next) {
  // 在这里执行刷新操作
  next();
}

希望这些解决方案对您有帮助！如有任何问题，请随时提问。

相关问题

router-link刷新时选中

当使用 `router-link` 组件进行路由跳转时，如果刷新页面后需要保持当前路由链接的选中状态，可以使用 `router-link-active` 指令。

`router-link-active` 指令可以用来给某个元素绑定一个或多个 CSS 类名，当当前路由匹配到指定的路由时，该元素会自动添加这些 CSS 类名。

例如，你可以将 `router-link-active` 指令应用于 `<li>` 标签，然后指定一个 CSS 类名 "active"，这样当路由匹配到该链接时，该元素就会自动添加 "active" 类名，从而实现选中效果。

<ul>
  <li v-router-link="{ path: '/', exact: true }" router-link-active="active">首页</li>
  <li v-router-link="{ path: '/about' }" router-link-active="active">关于我们</li>
  <li v-router-link="{ path: '/contact' }" router-link-active="active">联系我们</li>
</ul>

在上面的示例中，我们使用 `v-router-link` 指令来生成路由链接，然后将 `router-link-active` 指令应用于每个 `<li>` 标签，并指定 "active" 类名。这样，在刷新页面后，如果当前路由匹配到某个链接，该链接所在的元素就会自动添加 "active" 类名，从而实现选中效果。

注意，`router-link-active` 指令可以应用于任何元素，不一定是 `<li>` 标签。另外，如果需要同时指定多个 CSS 类名，可以用数组来传递。例如：

<li v-router-link="{ path: '/', exact: true }" router-link-active="[ 'active', 'bold' ]">首页</li>

这样，当路由匹配到该链接时，该元素就会同时添加 "active" 和 "bold" 两个类名。

router-link刷新才跳转

如果你希望在点击 `router-link` 组件时刷新页面后再进行路由跳转，可以考虑使用 `force` 属性。

`router-link` 是 Vue Router 提供的用于生成路由链接的组件，它会根据配置的路由规则自动处理路由跳转。默认情况下，点击 `router-link` 组件时，Vue Router 会检测当前路由是否和目标路由相同，如果相同则不进行跳转。这样做是为了避免重复跳转和刷新。

要实现在点击 `router-link` 组件时刷新页面后再进行路由跳转，可以使用 `force` 属性。将 `force` 属性设置为 `true` 后，即使当前路由和目标路由相同，也会进行刷新和跳转。

下面是一个示例：

<router-link :to="{ path: '/some-route' }" :force="true">Go to Some Route</router-link>

这样，在点击 `router-link` 组件时，无论当前路由是否和目标路由相同，都会进行刷新和跳转。

需要注意的是，使用 `force` 属性可能会导致页面刷新，这可能会影响用户体验。请根据实际需求慎重使用。