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設置延時
一定要創(chuàng)建一個timer，然后調(diào)用延時之前先清除timer的延時
clearTimeout(this.timer); //清除延遲執(zhí)行
this.timer = setTimeout(()=>{ //設置延遲執(zhí)行
console.log('ok');
},1000);
以上這篇vue實現(xiàn)幾秒后跳轉(zhuǎn)新頁面代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue 中使用 watch 出現(xiàn)了如下的報錯的原因分析
這篇文章主要介紹了vue 中使用 watch 出現(xiàn)了如下的報錯信息的原因分析及解決方法，本文附有代碼解決方案，非常不錯,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個文件/文件夾，代碼很簡單，對vue3拖拽上傳功能感興趣的朋友一起看看吧2022-10-10
antd design table更改某行數(shù)據(jù)的樣式操作
這篇文章主要介紹了antd design table更改某行數(shù)據(jù)的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue設置默認首頁的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue中使用定時器(setInterval、setTimeout)的兩種方式
js中定時器有兩種，一個是循環(huán)執(zhí)行?setInterval，另一個是定時執(zhí)行?setTimeout，這篇文章主要介紹了Vue中使用定時器?（setInterval、setTimeout）的兩種方式,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue進階構造屬性，從4個方面來進行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來看一下2021-05-05
這篇文章主要介紹了vue的路由映射問題及解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家介紹了vue.js項目中使用原生js實現(xiàn)移動端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
vue-tree-chart樹形組件的實現(xiàn)(含鼠標右擊事件)
Vue-Tree-Chart,一個Vue.js2組件，本文就詳細的介紹一下vue-tree-chart樹形組件的實現(xiàn)(含鼠標右擊事件)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02