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