Vue调用$router.push后URL更新但$route状态未同步问题

问题原因与解决方案 #

为什么会出现地址栏更新但$route未同步的情况 #

• this.$router.push 是异步操作，调用后不会立刻完成路由状态更新：
  Vue Router的路由切换需要走完完整的导航校验流程：包括全局前置守卫、路由独享守卫、组件内守卫、异步组件加载、全局解析守卫、全局后置钩子等逻辑，整个流程是异步执行的。你在push调用后同步打印this.$route.path时，导航流程还未执行完毕，因此读取到的还是更新前的旧路由数据。
• 浏览器地址栏提前更新是因为Vue Router在调用push的早期阶段就会同步调用浏览器History API的pushState方法修改地址，这步操作是同步完成的，所以会先看到地址栏变化，再等路由状态完全更新。

如何获取更新后的路由路径 #

可以通过两种方式拿到更新后的$route数据：

1. 利用push方法的成功回调，回调会在导航完全完成后触发：

this.$router.push(
  {
    path: this.$route.path + this.initialCategoryPath,
  },
  () => {
    // 此时路由已更新，可拿到最新路径
    console.log(this.$route.path)
  }
)

2. 等待响应式数据更新完成后再读取，可使用$nextTick或者监听$route变化：

// 方法1：用$nextTick等待更新
this.$router.push({
  path: this.$route.path + this.initialCategoryPath,
})
this.$nextTick(() => {
  console.log(this.$route.path)
})

// 方法2：监听$route变化
watch: {
  '$route.path'(newPath) {
    console.log('最新路由路径：', newPath)
  }
}

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