Vue倒計時3秒后返回首頁Demo(推薦)

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

這篇文章主要介紹了Vue倒計時3秒后返回首頁Demo,倒計時結束后要清除計時器,防止內存泄漏,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧

Vue倒計時3秒后返回首頁Demo

首頁path:'/'

倒計時結束后要清除計時器，防止內存泄漏：

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秒后跳轉頁面

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

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

您可能感興趣的文章:

vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
如何在Vue單頁面中進行業(yè)務數(shù)據的上報
為什么要在標題里加上一個業(yè)務數(shù)據的上報呢，因為在咱們前端項目中，可上報的數(shù)據維度太多，比如還有性能數(shù)據、頁面錯誤數(shù)據、console捕獲等。這里我們只講解業(yè)務數(shù)據的埋點。
2021-05-05
如何讓別人訪問本地運行的vue項目
這篇文章主要介紹了如何讓別人訪問本地運行的vue項目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據通信的相關資料,需要的朋友可以參考下
2022-04-04
基于 Vue.js 2.0 酷炫自適應背景視頻登錄頁面實現(xiàn)方式
本文講述如何實現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內容始終得到最大限度的保留，可以得到最好的視覺效果
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
Vue?electron零基礎使用教程
Electron也可以快速地將你的網站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3?動態(tài)綁定背景圖片方法示例
這篇文章主要為大家介紹了vue3動態(tài)綁定背景圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-10-10