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

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