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` 属性可能会导致页面刷新，这可能会影响用户体验。请根据实际需求慎重使用。

相关问题

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" 两个类名。

vue router-link页面跳转并刷新跳转页面

在 Vue 中使用 `vue-router` 跳转页面时，默认情况下是不会刷新页面的。如果需要在跳转页面时刷新页面，可以使用以下方法：

1. 利用 `key` 属性强制组件重新渲染：在 `router-link` 标签上添加 `:key="$route.fullPath"` 属性，这样在路由发生变化时，组件会重新渲染，从而达到刷新页面的效果。

<router-link :to="{ path: '/example' }" :key="$route.fullPath">跳转到 Example 页面</router-link>

2. 利用 `watch` 监听 `$route` 对象的变化：在组件内部添加以下代码，当 `$route` 对象发生变化时，执行 `window.location.reload()` 方法刷新页面。

watch: {
  $route: function() {
    window.location.reload();
  }
}

以上两种方法都可以实现页面跳转并刷新跳转页面的效果，具体使用哪种方法，可以根据具体场景选择。