vue监听路由变化时watch方法会执行多次的原因及解决

需求描述

有A、B两个页面，A页面跳转B页面需要把ID传到B页面关联执行查询，并把数据展示在B页面

需求解析

如果是你，应该很容易就想到在B页面通过watch监听路由变化，然后获取参数执行查询数据的方法

解决需求

A页面中：

	   this.$router.push({
          path: '/leader-approval-action-details',
          query: {
            isFinish: 0,
            isOvertime: '是',
            id: 'xxx'
          }
        })

通过push打开B页面；
B页面接收参数：

    watch: {
      // 监听路由地址的改变
      $route: {
        immediate: true,
        handler: debounce(function(data) {
          if (this.$route.path === '/leader-approval-action-details' && this.$route.query) {
            this.params.isFinished = this.$route.query.isFinish
            this.params.isOvertime = this.$route.query.isOvertime
            this.params.id= this.$route.query.id
            this.getTableInfo()
          }
        }, 1000)
      }
    },

看起来是不是很简单？

但是问题来了，由于B页面做了keep-alive页面缓存，第一次路由切换的时候getTableInfo方法只执行一次，达到了预期效果。但是，如果关闭B页面或者不关闭B页面的情况下再从A页面跳转到B页面的情况下就会触发两次或多次getTableInfo方法。

查了很多资料，vue项目watch内的函数重复触发问题 这里有解释造成这种情况的原因。

解决办法：

添加一个flag参数来判断页面是否是active状态，使用keep-alive缓存的组件只会触发activated和deactivated事件，所以就在这两个事件触发时把flag置为true和false，只有在flag为true的时候才执行getTableInfo()。

activated() {
      this.activatedFlag = true 
      if (this.$route.query.date && this.activatedFlag) { 
            this.params.isFinished = this.$route.query.isFinish
            this.params.isOvertime = this.$route.query.isOvertime
            this.params.id= this.$route.query.id
            this.getTableInfo()
      }
    },
deactivated () { this.activatedFlag = false; },