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 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
jquery ui对话框实例代码
May 10 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
vuex实现购物车功能
Jun 28 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 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
Element Steps步骤条的使用方法
2020/07/26 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python模拟三级菜单效果
2017/09/11 Python
快速了解Python相对导入
2018/01/12 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python开头的coding设置方法
2019/08/08 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
教师对学生的寄语
2014/04/03 职场文书
运动会方阵口号
2014/06/07 职场文书
2014年质量工作总结
2014/11/22 职场文书
护士年终个人总结
2015/02/13 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
python实现批量移动文件
2021/04/05 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python