Vue 组件定时器翻倍执行问题解决

Vue 项目一个页面有两个兄弟组件，分别是组件A和组件B

组件A的 mounted 中有一个 setInterval 定时器，从组件A切换到组件B，组件A中的 setInterval 还在运行，再次切换到组件A时，此时，定时器中的请求翻倍了...

解决方案 1：

setInterval 生成的 ID 号通过 sessionStorage 保存，组件B切换到A时，在 mounted 里面 setInterval 代码执行之前进行 sessionStorage 变量判断，如果存在数据，获取 setInterval ID 值，执行 window.clearInterval(ID)

这里只会处理定时器翻倍问题，不能彻底解决请求问题，切换 vue router 后，页面还有会定时器请求...

解决方案 2：

使用 Vue Router 的 beforeRouteLeave ，表示导航离开该组件的对应路由时调用此函数。实现如下

  ...
  mounted () {
    ...
  },
  beforeRouteLeave (to, from, next) {
    if (sessionStorage.getItem('getResoucesIntervalId')) {
      window.clearInterval(parseInt(sessionStorage.getItem('getResoucesIntervalId')))
    }
    next()
  },
  methods: {}
  ...

官方地址: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards