vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~
<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实现几秒后跳转新页面代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue跳转方式(打开新页面)及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two'
-
vue实现登录后页面跳转到之前页面
在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.
-
vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳
-
vue-router跳转时打开新页面的两种方法
最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持
-
vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ <template> <div @click="clickJump()">提交</div> </template> <script> export default { data(){ return { count:"",//倒计时 } } }, mounted(){ }, methods: { //几秒后进入跳转页面 clickJump(){ const timej
-
5秒后跳转到另一个页面的js代码
复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>5秒后跳转到另一个页面</title> <script type="text/javascript"> var t = 5; function countDown(){ var
-
微信小程序链接传参并跳转新页面
像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122 下面是传递参数并展示新页面的一个简单栗子: 这是index.wxml代码: <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}&quo
-
详解springmvc控制登录用户session失效后跳转登录页面
springmvc控制登录用户session失效后跳转登录页面,废话不多少了,具体如下: 第一步,配置 web.xml <session-config> <session-timeout>15</session-timeout> </session-config> 第二步,配置spring-mvc.xml <!-- Session失效拦截 --> <mvc:interceptors> <!-- 定义拦截器 --> <
-
js 3秒后跳转页面的实现代码
隔多少秒后自动跳转到其它页(js脚本) 方法一: 在<head></head>之间加入js 复制代码 代码如下: <script language="javascript">var secs = 3; //倒计时的秒数 var URL ;function Load(url){URL = url;for(var i=secs;i>=0;i--) { window.setTimeout('doUpdate(' + i + ')', (secs
-
网站404页面3秒后跳到首页的实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">&
-
vue 点击按钮 路由跳转指定页面的实现方式
目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&
-
鼠标悬浮停留三秒后自动显示大图js代码
鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 <style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px 0 0 50px;} .piccon li{float:left;padding:0 10px;} #preview{position:absolute;border:1px solid #ccc;background:#333;paddin
-
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的.它可以用来显示任何元素的一些信息. 先在目标DOM结构中弹出小提示,然后2秒后提示消失 <input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement=&q
-
5秒后跳转效果(setInterval/SetTimeOut)
setInterval版 复制代码 代码如下: $(function () { setInterval(function () { var time = $("#time").text(); time = parseInt(time); time--; if (time >0) { $("#time").text(time); } else { window.location = $("#url").attr("href"
随机推荐
- 详解JavaScript中数组的reduce方法
- 正则表达式(regex)入门、元字符(特殊字符)学习与提高
- 仿google搜索提示 SuggestFramework的使用
- MySQL提示:The server quit without updating PID file问题的解决办法
- Riot.js 快速的JavaScript单元测试框架
- Vue.js表单控件实践
- 在Java的Struts中判断是否调用AJAX及用拦截器对其优化
- js实现网页检测是否安装了 Flash Player 插件
- js表头排序实现方法
- yii2组件之下拉框带搜索功能的示例代码(yii-select2)
- python生成式的send()方法(详解)
- Asp 返回引用类型函数代码
- C++你最好不要做的几点小结
- javascript inneHTML的地雷
- GreyBox技术总结(转)
- 兼容firefox的给每一个onClick再附加一个事件
- Java操作Mongodb数据库实现数据的增删查改功能示例
- 5个最顶级jQuery图表类库插件【jquery插件库】
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- javascript正则表达式之search()用法实例