Vue倒計時3秒后返回首頁Demo(推薦)
更新時間：2023年11月16日 14:32:35 作者：karshey
這篇文章主要介紹了Vue倒計時3秒后返回首頁Demo,倒計時結(jié)束后要清除計時器,防止內(nèi)存泄漏,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧
Vue倒計時3秒后返回首頁Demo
首頁path:'/'
倒計時結(jié)束后要清除計時器，防止內(nèi)存泄漏：
if (this.count === 0) {
clearInterval(this.timer);
}<!-- ErrorJump.vue -->
<template>
<h2>Error：找不到頁面！</h2>
<h4>{{ count }}S后<RouterLink to="/">跳回首頁</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中倒計時3秒后跳轉(zhuǎn)頁面
<template>
<div id="home">
<div>{{ count }}s后將自動跳轉(zhuǎn)到登錄頁！</div>
</div>
</template>
<script>
export default {
data(){
return {
count:"",//倒計時
}
}
},
created(){
??????this.threeGo()
},
methods: {
//3秒后進入跳轉(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倒計時3秒后返回首頁Demo的文章就介紹到這了,更多相關(guān)vue倒計時3秒返回首頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue的token刷新處理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue如何動態(tài)修改$router參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了在Vue3中,ref用于創(chuàng)建簡單數(shù)據(jù)的響應(yīng)式包裝,通過.value訪問和修改；reactive用于創(chuàng)建復(fù)雜對象的響應(yīng)式對象,可以直接訪問和修改屬性,兩者各有適用場景,ref更適合單個值,reactive更適合復(fù)雜對象,本文介紹vue3?ref和reactive區(qū)別,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了 Vue.js對象轉(zhuǎn)換的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
想要實現(xiàn)一個簡潔版的Mini-Vue框架，應(yīng)該包含三個模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫模塊，本文主要介紹的是渲染系統(tǒng)模塊的實現(xiàn)，需要的可以參考一下2023-07-07
Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動態(tài)上傳圖片，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue 3 響應(yīng)式系統(tǒng)中ref 在 reactive 中的自動解包行為
Vue3中,ref與reactive配合使用時會自動解包,使代碼更簡潔,響應(yīng)式系統(tǒng)更智能,替換ref會斷開舊連接,淺層reactive/shallowRef不觸發(fā)解包,但是需注意區(qū)分,下面通過示例給大家介紹Vue3響應(yīng)式探秘：ref 在reactive中的自動解包行為解析,感興趣的朋友一起看看吧2025-07-07
better scroll可以實現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06