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 新手24条实用建议[TUTS+]
Jun 21 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
js实现直播点击飘心效果
Aug 19 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
JQuery优缺点分析说明
2011/04/10 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
销售员个人求职的自我评价
2014/02/10 职场文书
留学推荐信范文
2014/05/10 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年服务员工作总结
2014/11/18 职场文书
监察建议书
2015/02/04 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers