vue实现几秒后跳转新页面代码


Posted in Javascript onSeptember 09, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
  <div @click="clickJump()">提交</div>
</template>
<script>
export default {
  data(){
    return {
      count:"",//倒计时
    }
  }
}, 
mounted(){  
},
 
methods: {
 //几秒后进入跳转页面
  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;
        //跳转的页面写在此处
        this.$router.push({path: '/address'});
      }
     },100)
    }
  },
}
</script>

补充知识:vue设置延时

一定要创建一个timer,然后调用延时之前先清除timer的延时

clearTimeout(this.timer); //清除延迟执行 
 
this.timer = setTimeout(()=>{  //设置延迟执行
  console.log('ok');
},1000);

以上这篇vue实现几秒后跳转新页面代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
create-react-app安装出错问题解决方法
2018/09/04 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python实现备份目录的方法
2015/08/03 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Python调用Windows命令打印文件
2020/02/07 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
营销总经理岗位职责
2014/02/02 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
股权转让协议范本
2014/12/07 职场文书
上班迟到检讨书
2015/05/06 职场文书