【bug】vue切换路由,watch内的函数被重复触发多次

当我们在Vue中切换路由时，通常会使用vue-router提供的路由守卫函数来监听路由的变化，并在变化时触发相应的操作。这些守卫函数包括beforeEach、afterEach等，它们可以在路由发生变化前或变化后执行一些操作，比如验证登录状态、记录用户行为等。

然而，如果我们在守卫函数内部使用watch监听路由对象的变化，会发现watch函数会被重复触发多次。这是因为Vue在切换路由时，会重新渲染组件，并在渲染过程中多次调用watch函数。

解决这个问题的方法有多种，以下介绍两种主要方法：

1.在watch函数内部使用if语句判断，仅在路由对象变化时执行相应的操作。例如：

watch: {
  '$route': function(newVal, oldVal) {
    if (newVal.path !== oldVal.path) {
      // 执行相应操作
    }
  }
}

2.使用$route对象提供的beforeRouteUpdate函数，它可以在路由变化前执行一些操作，比如清空页面数据。例如：

beforeRouteUpdate (to, from, next) {
  // 清空页面数据
  this.data = {}
  next()
}

总之，在使用watch监听路由变化时，我们要注意watch函数可能会被重复触发多次的问题，并采取相应的解决方法。