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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Vue异步加载about组件
Oct 31 Javascript
详解小程序横屏方案对比
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知道与问问的采集插件代码
2010/10/12 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jQuery的一些注意
2006/12/06 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
javascript如何创建对象
2016/08/29 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue 点击按钮增加一行的方法
2018/09/07 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
家长对孩子评语
2014/01/30 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书