使用vue-router编程式导航遇到问题求助

我之前也碰到过一模一样的坑——<router-link>点着跳转完全正常，但调用this.$router.push就是没动静，大概率是这几个原因，你可以挨个排查：

• 别在Vue实例外瞎调用this.$router
  要是你在普通JS文件、非Vue组件的函数里用this.$router.push，this根本不是Vue实例，自然找不到$router。这种情况直接导入router实例用就行：

  // 比如在工具函数文件里
  import router from './router'
  router.push('/target-page')
  

• 检查组件有没有正确注入router
  虽然main.js里已经挂载了router，但如果是自己new Vue创建的子实例没传router选项，或者是局部注册的组件没在正确的上下文里，组件里的this.$router会是undefined。看看组件的创建方式，确保router被正确传进去了。

• 核对路由路径的拼写！
  别笑，我真的踩过这个坑——<router-link to="/home">是对的，结果push的时候写成了this.$router.push('/hom')，路径错了当然跳不动。仔细对比路由表的path字段和push里的路径，别漏了斜杠或者拼错单词。

• 路由守卫是不是把导航拦下来了
  全局前置守卫（router.beforeEach）、路由独享守卫或者组件内守卫如果忘了调用next()，或者返回了false，都会让导航直接中断。检查下你的守卫代码：

  router.beforeEach((to, from, next) => {
    // 这里必须调用next()，不然导航就卡壳了
    next()
  })
  

  要是有鉴权逻辑，也要确保符合条件时能正确调用next()。

• 是不是在同一路由重复跳转
  Vue Router默认情况下，如果你push当前已经在的路由，只会抛出警告，不会触发导航。如果需要强制跳转，可以加个force: true选项：

  this.$router.push({ path: '/current-path', force: true })
  

  或者如果是参数变化需要更新组件，记得在组件里监听$route的变化。

• 版本兼容性别搞错
  Vue 2只能搭配Vue Router 3.x，Vue 3必须用Vue Router 4.x，版本不匹配也会出各种奇怪的问题。打开package.json看看这俩的版本是不是对应上了。

先从这几个方向排查，应该能找到问题所在。

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