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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
canvas绘制七巧板
Feb 03 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Element Alert警告的具体使用方法
Jul 27 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js比较日期大小的方法
2015/05/12 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python3中zip()函数使用详解
2018/06/29 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
工程监理应届生求职信
2013/11/09 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
初婚初育证明范本
2015/06/18 职场文书