Solve the problem that the vue background management system leaves the page to clear the timer failure

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

 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()
}

When writing the background, it is customary to set a main page (that is, including the header, side navigation bar, bottom, and center content) and put all the sub-pages in the center content. When setting the timer on the subpage, switching to other subpages does not really leave the page, but is still on the main page in essence, so setting the clear timer in destroyed(){} will not take effect.
Essentially: Clear the timer of the subcomponent
Solution: Clear when leaving the route beforeRouteLeave (to, from, next) {}

This method is placed on the child component
 

Notice

Next() must be added, otherwise switching routes will fail when switching the side navigation bar, resulting in the inability to switch pages