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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
Script的加载方法小结
Jan 12 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
Vue实现计算器计算效果
Aug 17 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
自考毕业自我鉴定
2014/03/18 职场文书
综合实践活动总结
2014/05/05 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
学习雷锋主题班会
2015/08/14 职场文书
门面租赁合同范文
2019/08/06 职场文书
golang import自定义包方式
2021/04/29 Golang
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers