Vue:在特定页面(route)执行定时任务

首先在项目的入口App.vue中使用watch对路由route进行判断,当路由不是指定的"Dashboard"路由时执行事件触发,关闭定时任务:

watch: {
    $route: {
      handler (newValue) {
        if (newValue.name != "Dashboard") {
          events.$emit('clearInterval')
        }
      },
      immediate: true
    }
  }

其中执行定时任务的setInterval和关闭定时任务的clearInterval方法写在Dashboard这个页面中:

mounted () {
    events.$on('clearInterval', val => {
      clearInterval(this.interval)
    })
    clearInterval(this.interval)
    this.init()
    this.interval = setInterval(() => {
      this.init()
    }, 60000)
  },
  methods: {

由上面可以看出,在这个页面下,每60s执行一次定时任务,当路由不在Dashboard时,关闭定时任务。

——————————————————————

父子组件之间事件触发可以使用$emit:

触发的方法使用:

events.$emit('方法名', 传参)    // $emit绑定一个自定义事件event ,当该语句被执行到的时候,会将参数抛出传递给父组件,父组件通过@event监听并接收参数,然后可通过$event访问到子组件抛出的参数

监听执行的方法使用:

events.$on('方法名', val => {

 })
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值