vue2中watch监听$route的变化

在 Vue2 中，可以使用 `$route` 对象来监听路由的变化。可以通过 `watch` 属性监听 `$route` 对象的变化，例如：

watch: {
  '$route': function (to, from) {
    // 路由变化时的操作
  }
}

在 `$route` 对象变化时，会执行回调函数，并将新的路由对象 `to` 和旧的路由对象 `from` 作为参数传递给回调函数。可以在回调函数中根据需要处理路由变化时的操作。

相关问题

vue 深度监听 this.$route.query

Vue 中深度监听 `this.$route.query` 可以用于实时获取路由查询参数的变化，并作出相应的处理。通常，你可以通过设置一个响应式数据来实现这个功能，比如使用 Vue 的 `watch` 或者第三方库如 `vue-watch-component`。

在 `methods` 或 `created` 生命周期钩子里，可以这样做：

export default {
  data() {
    return {
      queryParams: {}
    }
  },
  created() {
    // 使用 watch 监听 $route.query 的变化
    this.watchRouteQuery();
  },
  methods: {
    watchRouteQuery() {
      this.$watch('$route.query', (newVal) => {
        this.queryParams = newVal; // 更新本地的数据副本
      }, { deep: true }); // 设置 deep 参数为 true，表示对嵌套的对象或数组也进行监听
    }
  },
  // 其他生命周期钩子或业务逻辑...
}

当你需要监听路由查询参数时，只需要调用 `this.watchRouteQuery()` 即可。每当 `$route.query` 发生改变时，会自动更新 `queryParams` 对象。

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方法来取消监听。

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