vue 中编写404页面

前言

今日给自己项目添加404页面时，踩了一点坑，分享给大家。

正文

    <div class="_404"><h2 class="m-0">抱歉，页面未找到，<span>{{countDown}}</span>s后自动跳转到<a href="javascript:;" @click="goHome">首页</a></h2><img src="../assets/404.jpg" alt="页面未找到"></div><style>body {background-color: #dceebc;}._404 {width: 30%;margin: 5rem auto;}._404 img {width: 30rem;}._404 a {color: #010101;}._404 a:hover {color: skyblue;}
</style>

页面结构很简单，一点提示信息和一张顺眼的图片即可。

<script>export default {name: "NF404",data() {return {countDown: 5}},methods: {goHome() {this.$router.push('/main/home')}},created() {setInterval(() => {this.countDown > 0 ? this.countDown-- : this.$router.push('/main/home')}, 1000)}}
</script>

脚本这里，逻辑为倒计时后自动跳转至首页，或者主动点击链接也可以跳转。

结果发现，第一次进入404页面，是很成功的，但是再次进入的话，就会直接跳转至主页，没有倒计时。
第一时间我是觉得是因为vue组件从缓存里加载的问题，所以created函数只在第一次触发。于是在created函数中加入了alert()，发现每次进入404页面，确实是重新创建了。也就是说，vue router变换时，默认是会销毁离开的组件的。
那么我又想到可能是setInterval()的问题，可能是没有及时清除的原因，将代码修改之后，成功运行。

<script>export default {name: "NF404",data() {return {countDown: 5,timer: null}},methods: {goHome() {this.$router.push('/main/home')clearInterval(this.timer)}},created() {this.timer = setInterval(() => {this.countDown > 0 ? this.countDown-- : this.goHome()}, 1000)}}
</script>

22/05/10更新

在vue2中，捕获404路径的写法是：

{path: "*",name: "NotFound",component: () => import("@/views/common/not-found/NotFound.vue"),
}

而在vue3中，vue-router禁用了这种写法，改为：

{path: "/:pathMatch(.*)",name: "NotFound",component: () => import("@/views/common/not-found/NotFound.vue"),
}

结语

在vue组件中使用计时器的时候，一定要记得及时清除！
如果对你有帮助的话，请点一个赞吧

vue 中编写404页面相关推荐

Vue中编写老师页面
1.我们登录老师页面,但是会出现无权访问的情况,是因为我们要判断是老师还是学生登录老师页面. watch:{login(val){if(val){this.loadDetails();}}},meth ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
Vue中监听页面刷新和关闭beforeunload事件
代码在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
idea中浏览器打开页面404_深圳网站建设中的404页面有什么用
通常我们访问网站时,遇到404页面会让人很扫兴,想想正在兴致勃勃的看新闻.找资料.看视频等等,突然出现一个巨大的404,告诉你找的东西不存在,是不是有种想砸键盘的冲动? 可偏偏有很多404页面让你看到 ...
Vue 中定义方法页面上使用
vue中定义方法的格式为什么要这样定义最近在学习前段,特别是HBuildX 我看里面很多方式都是这样使用,所以想强加练习如何引用当然我们的editArticle也可以直接放到js中,如下: 都 ...
Vue中设置404错误页面【钢镚核恒】
Vue错误页面简介错误页面:为了让用户在访问不到的情况下,有更好的体验和反馈这里提供了使用步骤,上路! 有404.401组件模板,大家可以修改使用,或者自己动手造个更好的咯上路创建错误页面组 ...
vue 中嵌入iframe页面
使用的是vue-element-admin. 需求项目需求是在点击左边侧边栏的时候判断如果是外部的页面之后,将此页面在右侧打开,每打开一个,tagview中也会相应加上,当切换这些tagview时, ...
vue中监听页面，禁止点击浏览器返回按钮返回
问题某个页面限制用户点击浏览器返回按钮返回解决方法在该页面的vue实例中添加mounted destroyed钩子,并且添加goBack方法加以限制 mounted () {if (window ...
Vue中动态设置页面title
前言更多内容,请访问我的个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码在mian.js中引入 //设置title import VueWe ...

vue 中编写404页面

前言

正文

22/05/10更新

结语

vue 中编写404页面相关推荐

最新文章

热门文章