vue implementation jumps to new page code after a few seconds

  • 2021-08-12 02:04:57
  • OfStack

I won't talk too much, let's just look at the code ~


<template>
  <div @click="clickJump()"> Submit </div>
</template>
<script>
export default {
  data(){
    return {
      count:"",// Countdown 
    }
  }
}, 
mounted(){  
},
 
methods: {
 // Go to the jump page in a few seconds 
  clickJump(){
    const timejump = 1;
    if(!this.timer){
      this.count = timejump ;
      this.show = false;
      this.timer = setInterval(()=>{
      if(this.count > 0 && this.count <= timejump ){
        this.count--;
      }else{
        this.show = true;
        clearInterval(this.timer);
        this.timer = null;
        // The jump page is written here 
        this.$router.push({path: '/address'});
      }
     },100)
    }
  },
}
</script>

Additional knowledge: vue setting delay

1 Be sure to create an timer, and then clear the delay of timer before calling the delay


clearTimeout(this.timer); // Clear delayed execution  
 
this.timer = setTimeout(()=>{  // Set delayed execution 
  console.log('ok');
},1000);

Related articles: