Nuxt配置中调用this.$router.push路由跳转无响应问题求助

排查步骤与解决方案 #

第一步：捕获路由跳转的静默错误 #

Vue Router 3.1.0+版本中，$router.push 方法默认返回Promise，当跳转被终止（比如重复跳转同一路由、被路由守卫拦截）时，错误会被静默吞掉，不会抛出到外层的try/catch。
先修改问题行代码，打印跳转错误信息：

this.$router.push('/')
  .catch(err => console.log('路由跳转失败原因：', err))

根据打印的错误可以直接定位核心问题：

• 如果报错是NavigationDuplicated：说明当前已经处于/路由下，Vue Router默认不会触发重复跳转，可以改用$router.replace或者跳转前先判断当前路由地址是否和目标地址一致。
• 如果是其他自定义错误：大多是路由守卫逻辑导致的拦截。

第二步：检查全局路由守卫逻辑 #

绝大多数无报错跳转失效的问题都是前置路由守卫（beforeEach）逻辑错误导致的：

• 确认你写的登录态校验逻辑是否正确，有没有存在「登录态更新后守卫还未读取到最新值，直接拦截了首页跳转」的情况，比如你跳转时Vuex里的用户信息刚更新，但守卫读取的是旧的localStorage值导致判断未登录，直接终止了跳转（调用了next(false)或者回跳登录页）
• 确认守卫所有逻辑分支都调用了next()方法，遗漏next()会导致路由一直处于挂起状态，不会完成跳转。

第三步：确认Vuex中this.$router指向正确 #

你这段代码是写在Vuex的action中，需要确认你是否正确将Vue Router实例挂载到了Vuex的全局上下文：

• 先在跳转前打印console.log(this.$router)，如果输出为undefined，说明挂载失效，可以直接引入项目的路由实例调用跳转：

// 你的路由实例一般在@/router/index.js导出，直接引入使用即可
import router from '@/router'
// 替换问题行代码
router.push('/')

第四步：检查路由配置规则 #

• 确认/路径是否配置了重定向规则，重定向的目标地址是否存在或者被拦截
• 确认/对应的路由组件是否正常注册，没有拼写错误或者加载失败的问题

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