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类中获取外部函数名的方法与代码
Sep 12 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP读取xml方法介绍
2013/01/12 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
初学Python实用技巧两则
2014/08/29 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
详解Python打包分发工具setuptools
2019/08/05 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
2014年精神文明建设工作总结
2014/11/19 职场文书
员工离职通知函
2015/04/25 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
python基础之//、/与%的区别详解
2022/06/10 Python