1. 程式人生 > 程式設計 >vue實現幾秒後跳轉新頁面程式碼

vue實現幾秒後跳轉新頁面程式碼

我就廢話不多說了,大家還是直接看程式碼吧~

<template>
  <div @click="clickJump()">提交</div>
</template>
<script>
export default {
  data(){
    return {
      count:"",//倒計時
    }
  }
},mounted(){  
},methods: {
 //幾秒後進入跳轉頁面
  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;
        //跳轉的頁面寫在此處
        this.$router.push({path: '/address'});
      }
     },100)
    }
  },}
</script>

補充知識:vue設定延時

一定要建立一個timer,然後呼叫延時之前先清除timer的延時

clearTimeout(this.timer); //清除延遲執行 
 
this.timer = setTimeout(()=>{  //設定延遲執行
  console.log('ok');
},1000);

以上這篇vue實現幾秒後跳轉新頁面程式碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。