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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
基于文本的访客签到簿
2006/10/09 PHP
PHP5 安装方法
2007/01/15 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP制作万年历
2015/01/07 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
AngularJS基础知识
2014/12/21 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python自定义函数def的应用详解
2020/06/03 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
PHP面试题附答案
2015/11/28 面试题
精彩自我鉴定
2014/01/16 职场文书
公司担保书格式范文
2014/05/12 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
九九重阳节标语
2014/10/07 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS