快捷導(dǎo)航

Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)

更新時(shí)間：2023年11月16日 14:32:35 作者：karshey

這篇文章主要介紹了Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo,倒計(jì)時(shí)結(jié)束后要清除計(jì)時(shí)器,防止內(nèi)存泄漏,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo

首頁(yè)path:'/'

倒計(jì)時(shí)結(jié)束后要清除計(jì)時(shí)器，防止內(nèi)存泄漏：

if (this.count === 0) {
	clearInterval(this.timer);
}

<!-- ErrorJump.vue -->
<template>
	<h2>Error：找不到頁(yè)面！</h2>
	<h4>{{ count }}S后<RouterLink to="/">跳回首頁(yè)</RouterLink></h4>
</template>
<script>
export default {
	data() {
		return {
			count: 0,
			timer: null,
		};
	},
	mounted() {
		this.count = 3;
		this.timer = setInterval(() => {
			this.count--;
			if (this.count === 0) {
				clearInterval(this.timer);
				this.$router.push("/");
			}
		}, 1000);
	},
};
</script>

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

<template>
  <div id="home">
      <div>{{ count }}s后將自動(dòng)跳轉(zhuǎn)到登錄頁(yè)！</div> 
    </div>
</template>
<script>
export default {
    data(){
        return {
            count:"",//倒計(jì)時(shí)
        }
    }
},
created(){
   ??????this.threeGo()
},
methods: {
  //3秒后進(jìn)入跳轉(zhuǎn)頁(yè)面
    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)的頁(yè)面寫在此處
				this.$router.push({
					path: ''
				});
			}
		  },1000)
		}
    },
}
</script>

到此這篇關(guān)于Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo的文章就介紹到這了,更多相關(guān)vue倒計(jì)時(shí)3秒返回首頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue的token刷新處理的方法
這篇文章主要介紹了vue的token刷新處理的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue如何動(dòng)態(tài)修改$router參數(shù)
這篇文章主要介紹了vue如何動(dòng)態(tài)修改$router參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue3?ref和reactive的區(qū)別解析
這篇文章主要介紹了在Vue3中,ref用于創(chuàng)建簡(jiǎn)單數(shù)據(jù)的響應(yīng)式包裝,通過(guò).value訪問(wèn)和修改；reactive用于創(chuàng)建復(fù)雜對(duì)象的響應(yīng)式對(duì)象,可以直接訪問(wèn)和修改屬性,兩者各有適用場(chǎng)景,ref更適合單個(gè)值,reactive更適合復(fù)雜對(duì)象,本文介紹vue3?ref和reactive區(qū)別,感興趣的朋友一起看看吧
2025-02-02
淺談VUE中演示v-for為什么要加key
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
Vue.js對(duì)象轉(zhuǎn)換實(shí)例
這篇文章主要介紹了 Vue.js對(duì)象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-06-06
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下
2023-07-07
Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue 3 響應(yīng)式系統(tǒng)中ref 在 reactive 中的自動(dòng)解包行為
Vue3中,ref與reactive配合使用時(shí)會(huì)自動(dòng)解包,使代碼更簡(jiǎn)潔,響應(yīng)式系統(tǒng)更智能,替換ref會(huì)斷開(kāi)舊連接,淺層reactive/shallowRef不觸發(fā)解包,但是需注意區(qū)分,下面通過(guò)示例給大家介紹Vue3響應(yīng)式探秘：ref 在reactive中的自動(dòng)解包行為解析,感興趣的朋友一起看看吧
2025-07-07
vue better scroll 無(wú)法滾動(dòng)的解決方法
better scroll可以實(shí)現(xiàn)輪播圖和頁(yè)面滾動(dòng)，是移動(dòng)端滾動(dòng)插件，這篇文章主要介紹了vue better scroll 無(wú)法滾動(dòng)的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06