5秒后跳转首页（倒计时）

需求：

注册或修改密码等成功，5秒后跳转到首页。

• test.vue示例：

<template>
    <div class="timedown-outside">
        <h3><i>{{countDown}}</i> 秒后跳转到<span>首页</span> </h3>
        <button @click="timeDown">点击开始倒计时</button>
    </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      countDown: 5,
      timer: ''
    }
  },
  methods: {
      //*** 利用计时器，控制用于倒计时的变量countDown（1秒减1），countDown为 0 时 清除该定时器，并跳转到首页。
    timeDown () {
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.countDown > 0) { 
            this.countDown--
          } else {
            clearInterval(this.timer)
            this.$router.push({ path: '/' })
          }
        }, 1000)
      }
    }
  }
}
</script>
<style>
    .timedown-outside{
        width:300px;
        height:150px;
        padding-top:50px;
        margin: auto;
        background:lightyellow;
    }
   span{
       color:#f40;
    }
    span:hover{
        color:purple;
        text-decoration:underline;
        cursor:pointer;
        font-size:16px;
    }
    i{
        font-size: 24px;
    }
</style>

点击按钮前：

点击按钮，倒计时中：

倒计时完成，后跳转到首页：