前端知識零散繁多，一段時間不看就又忘了。在回顧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秒后自动跳转到首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。