Vue2路由跳转不被 watch $route监听到的方法

在Vue2中，$route是一个响应式对象，当路由发生变化时，会自动更新。但是如果你想监听$route的变化，可能会遇到一些问题。

这是因为$route是一个响应式对象，而watch默认只监听对象的第一层属性。如果你想监听$route的变化，可以使用深度监听（deep）或手动监听$route的变化。

1. 使用深度监听：

watch: {
  '$route': {
    handler: function(newVal, oldVal) {
      // do something
    },
    deep: true
  }
}

2. 手动监听$route的变化：

mounted() {
  this.unwatch = this.$router.afterEach((to, from) => {
    // do something
  })
},
beforeDestroy() {
  this.unwatch()
}

在mounted钩子中，我们使用$router.afterEach()方法来监听路由的变化，并将返回的函数赋值给实例的unwatch属性。在beforeDestroy钩子中，我们调用unwatch方法来取消监听。

这样就可以监听到路由的变化了。