快捷導(dǎo)航

vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼

更新時(shí)間：2023年10月12日 10:37:32 作者：愛喝冰可樂

在商場大家經(jīng)?？吹酵＼囀召M(fèi)倒計(jì)時(shí)支付頁面,今天小編通過本文給大家分享vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面功能,感興趣的朋友一起看看吧

vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面

在這里插入圖片描述

data () {
	return {
		timers: null,
		countDown: null
	}
}

count () {
      const count = 15
      this.countDown = count
      this.timers = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          clearInterval(this.timers)
          this.$router.push('/login')
        }
      }, 1000)
    }

激活條件：this.count()

vue中倒計(jì)時(shí)3秒后跳轉(zhuǎn)頁面

<template>
  <div id="home">
      <div>{{ count }}s后將自動(dòng)跳轉(zhuǎn)到登錄頁！</div> 
    </div>
</template>
<script>
export default {
    data(){
        return {
            count:"",//倒計(jì)時(shí)
        }
    }
},
created(){
   ??????this.threeGo()
},
methods: {
  //3秒后進(jìn)入跳轉(zhuǎn)頁面
    threeGo(){
		const TIME_COUNT = 3;
		if(!this.timer){
			this.count = TIME_COUNT;
			this.show = false;
			this.timer = setInterval(()=>{
			if(this.count > 0 && this.count <= TIME_COUNT){
				this.count--;
			}else{
				this.show = true;
				clearInterval(this.timer);
				this.timer = null;
				//跳轉(zhuǎn)的頁面寫在此處
				this.$router.push({
					path: ''
				});
			}
		  },1000)
		}
    },
}
</script>

到此這篇關(guān)于vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面的文章就介紹到這了,更多相關(guān)vue 倒計(jì)時(shí)跳轉(zhuǎn)頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue完成項(xiàng)目后,打包成靜態(tài)文件的方法
今天小編就為大家分享一篇vue完成項(xiàng)目后,打包成靜態(tài)文件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue實(shí)現(xiàn)微信小程序中預(yù)覽文件的縮放功能
在微信小程序中,默認(rèn)情況下,文件預(yù)覽功能不支持文檔縮放,導(dǎo)致用戶在遇到小字體時(shí)難以清晰閱讀,為了解決這一問題并提升用戶體驗(yàn),實(shí)現(xiàn)文檔的縮放功能至關(guān)重要,所以本文
2024-12-12
Vue指令工作原理實(shí)現(xiàn)方法
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個(gè)生命周期鉤子，接下來通過本文給大家詳細(xì)介紹Vue指令工作原理實(shí)現(xiàn)方法，需要的朋友參考下吧
2021-06-06
淺談Vuex的狀態(tài)管理(全家桶)
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue?element如何添加遮罩層
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下
2022-11-11
Vue 2.0中生命周期與鉤子函數(shù)的一些理解
這篇文章主要給大家介紹了關(guān)于Vue 2.0中生命周期與鉤子函數(shù)的相關(guān)資料，對大家學(xué)習(xí)或者使用vue2.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨小編一起來看看吧。
2017-05-05
uni-app 使用編輯器創(chuàng)建vue3 項(xiàng)目并且運(yùn)行的操作方法
這篇文章主要介紹了uni-app 使用編輯器創(chuàng)建vue3 項(xiàng)目并且運(yùn)行的操作方法,目前uniapp 創(chuàng)建的vue3支持 vue3.0 -- 3.2版本也就是說setup語法糖也是支持的，需要的朋友可以參考下
2023-01-01
vue3集成electron的過程
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中集成Electron,包括安裝electron和electron-builder兩個(gè)依賴,以及配置.npmrc文件和手動(dòng)修改鏡像源的方法,整個(gè)過程詳細(xì)記錄了從創(chuàng)建項(xiàng)目、安裝依賴、修改配置、到最終打包部署的每一步
2024-10-10
html頁面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04