NuxtJS router push在Chrome下跳转异常：改密码后仅首次有效

问题描述 #

我基于Nuxt v2.12.2与Axios 5.3.6开发应用，需要实现用户修改密码后跳转至登录页的功能。修改密码的路由示例为http://localhost:3000/password?email=some@email.com&code=b81f9412-1600-4fd2-aea2-70e97a6a853b。点击确认按钮后，前端执行以下Axios请求调用后端：

this.$axios
        .post(
          '/password',
          {
            password: this.page.password
          },
          {
            headers: { 'X-Client': 'web-local' },
            params: this.params
          }
        )
        .then((resp) => {
          this.$toast.success(this.$t('pages.password.toast.success'))
          this.$router.push( { path: '/login' } )
        })
        .catch((err) => {
          if (err.response.status === 409) {
            this.$toast.error(this.$t('pages.password.toast.err409'))
          }
        })
        .finally(() => {
          this.$store.dispatch('loading/stopLoading')
        })

调试发现流程能正常进入.then分支并执行this.$router.push({ path: '/login' })，但该跳转仅首次有效；若用同一链接刷新页面后执行修改密码操作，跳转失效，页面停留在改密码页。浏览器控制台与Nuxt日志均无报错。

解决方案 #

1. 强制页面重载跳转 #

用原生跳转替代Nuxt客户端路由，绕过缓存影响：

// 替换原this.$router.push行
window.location.href = '/login'

这种方式会强制刷新页面，确保跳转不受客户端路由缓存干扰，适合一次性操作后的跳转场景。

2. 清除路由参数并延迟跳转 #

刷新后页面可能保留旧参数或状态，导致路由逻辑异常：

.then((resp) => {
  this.$toast.success(this.$t('pages.password.toast.success'))
  // 清除当前路由参数
  this.$router.replace({ query: {} })
  // 延迟跳转确保状态更新完成
  setTimeout(() => {
    this.$router.push({ path: '/login' })
  }, 100)
})

3. 重置组件状态避免缓存复用 #

如果密码页被设置了keep-alive，刷新后组件实例复用可能导致异常。添加路由离开钩子重置状态：

beforeRouteLeave(to, from, next) {
  // 重置密码输入框与参数状态
  this.page.password = ''
  this.params = {}
  next()
}

也可在nuxt.config.js中调整路由配置，禁用该页面的缓存。

4. 替换路由跳转方法 #

尝试用replace替代push，或通过$nuxt获取路由实例：

// 方式1：使用replace避免留下历史记录
this.$router.replace({ path: '/login' })

// 方式2：通过$nuxt获取路由实例
this.$nuxt.$router.push({ path: '/login' })

5. 清除用户相关存储状态 #

后端返回的响应可能设置了Cookie或本地存储，影响路由跳转：

.then((resp) => {
  this.$toast.success(this.$t('pages.password.toast.success'))
  // 清除用户相关存储
  localStorage.removeItem('user-token')
  document.cookie = 'auth-token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
  this.$router.push({ path: '/login' })
})

内容的提问来源于stack exchange，提问作者CodingMonkey