Vue中跳转路由并刷新法全解析·当你需要页面完全重新加载时·试试`router.go`

作者：网络发烧程序猿 | 发布时间：2025-07-02 |

这种方法简单直接，就像你直接在浏览器地址栏输入新网址一样。当你需要页面完全重新加载时，这个方法再合适不过了。

Vue Router提供了`router.go()`方法，就像浏览器的后退和前进功能。传递参数0，就会刷新当前页面，但你的状态和部分数据会保留。

在SPA应用中，`router.push()`通常用来跳转路由。但如果你需要在新路由加载后立即刷新页面，你可以结合使用这两种方法。

1. 使用`window.location`方法

这是最简单的方法，直接在代码中使用`window.location.href = '/new-route'`来刷新页面并跳转到新路由。

优点	缺点
简单直接	所有状态和数据都会被重置

2. 使用`router.go()`方法

通过`router.go(-1)`或`router.go(1)`来实现页面的刷新，但你的数据不会丢失。

优点	缺点
保留状态信息	页面依然会重新渲染

3. 使用`router.push()`方法并强制刷新

通过`router.push('/new-route')`跳转新路由，然后使用`window.location.reload()`强制刷新页面。

优点	缺点
适用于需要立即刷新页面的情况	操作稍微复杂

比如，一个按钮点击后，需要跳转到新路由并刷新页面。代码如下：

methods: {
  goToNewRoute() {
    this.$router.push('/new-route');
    window.location.reload();
  }
}

选择哪种方法取决于你的具体需求。需要完全重载页面？用`window.location`。需要保留部分状态？试试`router.go()`。无论哪种方法，都建议根据你的应用场景进行测试和验证。