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 面向对象的5钟写法
Jul 31 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 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数组总结篇(一)
2008/09/30 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
React 组件间的通信示例
2018/06/14 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
基于python实现高速视频传输程序
2019/05/05 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python flask框架端口失效解决方案
2020/06/04 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
巴西网上药房:onofre
2016/11/21 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
捐款倡议书范文
2014/02/02 职场文书
我的祖国演讲稿
2014/05/04 职场文书
2014年老干部工作总结
2014/11/21 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书