404倒计时自动跳转到指定网页

作者: bkbtp 分类: 前端 发布时间: 2018-05-26 16:13

404页面通常都会搭配一个自动跳转的连接,这里给出一个常用的核心代码。

<router-link to="/base/person" class="redirect">{{seconds}} 秒后自动跳转到个人空间,或点击直接跳转</router-link>
data() {
  return {
    seconds: 6,
    timer: ''
  }
},
created() {
  this.go()
},
methods: {
  go() {
    if (--this.seconds > 0) {
      this.timer = setTimeout(() => {
        this.go()
      }, 1000)
    } else {
      this.$router.push('/base/person')
    }
  }
},
destroyed() {
  clearTimeout(this.timer)
}

这套是vue中的使用方式,核心逻辑基本都没什么问题,需要注意的就是记得在destroyed停止定时器,不然当用户主动点击链接跳转成功后,还会在指定秒数后再跳转一次。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。