vue實現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼
更新時間：2020年09月09日 10:02:13 作者：☞小阿平☜
這篇文章主要介紹了vue實現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<template>
<div @click="clickJump()">提交</div>
</template>
<script>
export default {
data(){
return {
count:"",//倒計時
}
}
},
mounted(){
},
methods: {
//幾秒后進入跳轉(zhuǎn)頁面
clickJump(){
const timejump = 1;
if(!this.timer){
this.count = timejump ;
this.show = false;
this.timer = setInterval(()=>{
if(this.count > 0 && this.count <= timejump ){
this.count--;
}else{
this.show = true;
clearInterval(this.timer);
this.timer = null;
//跳轉(zhuǎn)的頁面寫在此處
this.$router.push({path: '/address'});
}
},100)
}
},
}
</script>
補充知識：vue設(shè)置延時
一定要創(chuàng)建一個timer，然后調(diào)用延時之前先清除timer的延時
clearTimeout(this.timer); //清除延遲執(zhí)行
this.timer = setTimeout(()=>{ //設(shè)置延遲執(zhí)行
console.log('ok');
},1000);
以上這篇vue實現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的日歷控件，文中通過示例代碼講解詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本篇文章主要介紹了vue多種彈框的彈出形式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家分享一篇Vue項目中設(shè)置背景圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在現(xiàn)代Web應(yīng)用中,集成文檔編輯功能變得越來越常見,特別是在協(xié)作環(huán)境中,能夠直接在Web應(yīng)用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細介紹如何在Vue.js項目中集成Word在線編輯功能,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue項目前端埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue中如何引入html靜態(tài)頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue如何實現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07