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的并立志做一个全站的菜鸡…
做一个笔记,也希望这篇文章能对你有点帮助

猜你喜欢

转载自blog.csdn.net/weixin_41897122/article/details/108210871