vue实现5秒后自动跳转到首页

前端知识零散繁多，一段时间不看就又忘了。在回顾HTML head标签内部常用设置时，看到的http-equiv的refresh属性设置(自动刷新并指向某页面)
意思是网页将在设定的时间内，自动刷新并转到设定的网址。可以看下面的例子（放入head标签）:

<meta http-equiv="refresh" content="2; URL=https:/www.daidu.com"> //意思是2秒后跳转向百度

想必大家对404网页已经见得特别多，于是我想到在自己用vue做的网站上加一个404后若干秒自动返回首页的功能，话不多说，直接上代码

<template><div class="not-found"><meta http-equiv="refresh" content="5; URL=http:/www.daidu.com"> //方法1：直接书写完整url5秒后跳转向百度<meta http-equiv="refresh" content="5;URL=/home">  // 方法2：也可以通过/home直接vue-router跳转<h1>哦噢,您访问的页面不存在!</h1><img src="~./error_404.png" alt="404"/><h3>将于<span>&nbsp;{{initTime}}&nbsp;</span>秒后返回首页</h3></div>
</template><script>export default {name: "NotFound",data() {return {initTime: 5}},methods: {leftTime() {this.initTime--}},created() {setInterval(this.leftTime, 1000)}}
</script><style scoped>.not-found {display: flex;flex-direction: column;justify-content: space-between;align-items: center;}h1 {margin-top: 100px;}span {color: dodgerblue;}
</style>

再加上使用flex 布局，代码量少，布局优雅，比之前纯用js代码写简洁不少,下面是效果图：

就这！
来自一个啃着vue的并立志做一个全站的菜鸡…
做一个笔记，也希望这篇文章能对你有点帮助

谁能仅靠十年寒窗苦读，去经营百岁人生?
活到老，学到老！
知识改变人生！
共勉！

vue实现5秒后自动跳转到首页相关推荐

怎么用html3秒自动跳网页,HTML页面3秒后自动跳转的三种常见方法
在练习中,我分博累发口小定逻间框加题览果些屏洁动理应们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转圈件浏用是刚.它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名呢? 我圈调直年情,量的单框 ...
JavaScript网页制作--五秒后自动跳转页面
JavaScript网页制作–五秒后自动跳转页面通常在浏览一些网站时,会出现网页不存在的情况,网页不存在之后,有些网站会在5秒后自动跳转到一个新的网页,比如网站的首页.可以利用定时器和locatio ...
jsp页面几秒后自动跳转或者刷新
第一种方法: <meta http-equiv="refresh" content="3;url=login.jsp"> 把上面这句放在< ...
打开jsp/html，3秒后自动跳转
打开一个页面,过几秒跳转,一般会应用在某些操作成功或者失败之后,给出提示,然后跳回到别的页面.比如你注册成功或者失败后,添加成功后者失败后.效果稍微好点儿的,会用隐藏域或者ajax在页面上直接提示并刷 ...
html几秒自动跳转,HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法方法1: 最简单的一种:直接在前面里面添加代码: 复制代码代码如下: //3秒之后自动 ...
10秒后自动跳转网页
脚本说明: 把如下代码加入区域中 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var start=new Date(); ...
java中3秒自动跳转_HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法方法1: 最简单的一种:直接在前面里面添加代码: 复制代码代码如下: //3秒之后自动 ...
php 5秒跳转,PHP 5秒后自动跳转到某页面
history.go(-2); //javaScript代码,后退两个页面. setTimeout("playSec("+num+")",1000); // ...
django中实现页面倒数几秒后自动跳转
实现倒计时跳转要和html中的js结合起来, 例如:实现一个页面简单的注册,然后注册成功后倒计时自动跳转到登录页面. # 注册页面 def register(request):return rende ...
微信小程序页面3秒后自动跳转
setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种: setTimeout(function () { // wx.red ...

vue实现5秒后自动跳转到首页

vue实现5秒后自动跳转到首页相关推荐

最新文章

热门文章