//开启定时器 //清除定时器
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(),否则切换侧标导航栏时 切换路由会失效,导致不能切换页面