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 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php实现session共享的实例方法
2019/09/19 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
深入浅出学习python装饰器
2017/09/29 Python
python3人脸识别的两种方法
2019/04/25 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
电子商务专业推荐信范文
2013/12/02 职场文书
社区国庆节活动方案
2014/02/05 职场文书
司仪主持词两篇
2014/03/22 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis