解决vue后台管理系统 离开页面清除定时器失效问题

//开启定时器 //清除定时器

 data() {
    return {
      sysImgData: [],
      params: {
        stationname: '建湖城南污水厂',
         drawingname: '建湖城南加药间'

      },
      setInt: null
    }
  },
  compoents: {
    SysImgs
  },
  created() {
    //清理定时器
    clearInterval(this.setInt)
    console.log('执行定时器')
    // 这里怎么执行
    this.setInt = setInterval(() => {
      this.req();
    console.log('开始setInterval')
    }, 1500)
  },
//离开页面时清除定时器

beforeDestory() {
    clearInterval(this.setInt)
  },

//离开页面清除定时器失效问题
 beforeRouteLeave (to, from, next) {
    console.log("我离开了")
    clearInterval(this.setInt)
    next()
}

在写后台时，习惯性设置一个主页面（也就是包含头部、侧边导航栏、底部、中心内容）将子页面都放到中心内容content里。在子页面设置定时器时，切换其他子页面并不是真正的离开了页面，实质上还是在主页面上，所以在destroyed(){}设置清除定时器并不会生效。
本质上是：清除子组件的定时器
解决方法：在 beforeRouteLeave (to, from, next) {} 离开路由的时候清除

该方法放在子组件上
 

注意

必须添加next（），否则切换侧标导航栏时 切换路由会失效，导致不能切换页面