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获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
js中document.write的那点事
Dec 12 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
星际争霸任务指南——神族
2020/03/04 星际争霸
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
微信小程序  modal弹框组件详解
2016/10/27 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
党员个人自我评价
2015/03/03 职场文书
房产遗嘱范本
2015/08/06 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python中文纠错的简单实现
2021/07/07 Python