监听事件方法

1.监听路由改变

watch: {
      $route() {
        this.getLabels()
      },
    },

2.监听多个页面的数据变化如列表->详情

//main.js里的代码
Vue.prototype.addStorageEvent = function (type, key, data) {
  if (type === 1) {
    // 创建一个StorageEvent事件
    const newStorageEvent = document.createEvent('StorageEvent')
    const storage = {
      setItem: function (k, val) {
        localStorage.setItem(k, val)
        // 初始化创建的事件
        newStorageEvent.initStorageEvent(
          'setItem',
          false,
          false,
          k,
          null,
          val,
          null,
          null
        )
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      },
    }
    return storage.setItem(key, data)
  } else {
    // 创建一个StorageEvent事件
    const newStorageEvent = document.createEvent('StorageEvent')
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val)
        // 初始化创建的事件
        newStorageEvent.initStorageEvent(
          'setItem',
          false,
          false,
          k,
          null,
          val,
          null,
          null
        )
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      },
    }
    return storage.setItem(key, data)
  }
}

//详情里面的监听方法  监听列表数据有没有变化

 window.addEventListener('storage', (e) => {
        if (e.newValue == this.caseDetail.id) {
          this.caseDetail.mark = !this.caseDetail.mark
        }
        localStorage.removeItem('caseDetail_mark')
      })

//详情的数据改变，向localstoriage添加值
this.addStorageEvent(1, 'caseDetail_mark', row.id)

 created() {
 //在列表页监听详情页有没有变化
      window.addEventListener('storage', (e) => {
        const item = this.list.find((item) => item.evidence_id == e.newValue)
        if (item != undefined) {
          item.mark = !item.mark
        }
        //清空id
        localStorage.removeItem('caseDetail_mark')
      })

//在列表添加数据
  this.addStorageEvent(1, 'caseDetail_mark', row.evidence_id)