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 Sort 表格排序
Oct 31 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
js获取Get值的方法
Sep 29 Javascript
Vue.js表单控件实践
Oct 27 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
JavaScript使用canvas绘制随机验证码
Feb 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
curl和libcurl的区别简介
2015/07/01 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Vue中props的使用详解
2018/06/15 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Vue实现购物车实例代码两则
2020/05/30 Javascript
python 域名分析工具实现代码
2009/07/15 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
详解python while 函数及while和for的区别
2018/09/07 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python文件和文件夹复制函数
2020/02/07 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
岗位说明书标准范本
2014/07/30 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
小学安全教育主题班会
2015/08/12 职场文书