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>到此這篇關于Vue倒計時3秒后返回首頁Demo的文章就介紹到這了,更多相關vue倒計時3秒返回首頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
如何在Vue單頁面中進行業(yè)務數(shù)據(jù)的上報
為什么要在標題里加上一個業(yè)務數(shù)據(jù)的上報呢，因為在咱們前端項目中，可上報的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務數(shù)據(jù)的埋點。2021-05-05
這篇文章主要介紹了如何讓別人訪問本地運行的vue項目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信的相關資料,需要的朋友可以參考下2022-04-04
基于 Vue.js 2.0 酷炫自適應背景視頻登錄頁面實現(xiàn)方式
本文講述如何實現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Vue中使用vue-plugin-hiprint插件進行打印的功能實現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等 分頁預覽,打印,操作簡單,運行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進行打印,需要的朋友可以參考下2025-04-04
Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vue3動態(tài)綁定背景圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10