写点什么

一文看懂 Vue2 和 Vue3 中设置 404 界面

作者:木偶
  • 2022-10-27
    陕西
  • 本文字数:1911 字

    阅读完需:约 6 分钟

一文看懂Vue2和Vue3中设置404界面

vue 页面中,如果跳转了不存在的路由那么,那么页面就会出现白屏状态,为了解决这个问题,我们可以自己写一个 404 界面,让其跳转过去。

一.vue2

1.index.js

在此文件中,一般存放的都是我们的路由信息,我们经常使用path:'*'来进行捕获我们的路由,度过不存在那么我们就让它进行跳转至我们自定义的 404 页面。


import Vue from 'vue'import Router from 'vue-router'import Homepage from '@/components/Homepage'Vue.use(Router)
export default new Router({ routes: [ { path: '/', component: Homepage, }, { path:'*', component:()=>import('../views/404.vue') } ]})
复制代码


注意:这个path一定要写在最外面

2.404.vue 页面

这个页面通常我们可以自定义,一般包括跳转某个页面的超链接或者就是定时多长时间进行跳转。


<template>    <div class="not_found">        <p>            页面将在<span>{{ time }}</span>秒后自动跳转首页,<br>            您也可以点击这里跳转<a href="/">首页</a>        </p>    </div></template>
<script>// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
export default { name: '', components: {
}, // 定义属性 data() { return { time: '10', time_end: null } }, // 计算属性,会监听依赖属性值随之变化 computed: {}, // 监控data中的数据变化 watch: {}, // 方法集合 methods: { GoIndex() { let _t = 9 this.time_end = setInterval(() => { if (_t !== 0) { this.time = _t--; } else { this.$router.replace('/') clearTimeout(this.time_end) this.time_end = null } }, 1000) } }, // 生命周期 - 创建完成(可以访问当前this实例) created() { this.GoIndex() }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() {
}, beforeCreate() { }, // 生命周期 - 创建之前 beforeMount() { }, // 生命周期 - 挂载之前 beforeUpdate() { }, // 生命周期 - 更新之前 updated() { }, // 生命周期 - 更新之后 beforeDestroy() { }, // 生命周期 - 销毁之前 destroyed() { clearTimeout(this.time_end) this.time_end = null }, // 生命周期 - 销毁完成 activated() { }, // 如果页面有keep-alive缓存功能,这个函数会触发}</script>
<style scoped lang='less'>.not_found { width: 100%; height: 100%; background: url('../../static/img/404.gif') no-repeat; background-position: center; background-size: cover;
p { position: absolute; top: 50%; left: 20%; transform: translate(-50%, 0); color: #fff; span{ color: orange; font-family: '仿宋'; font-size: 25px; } a { font-size: 30px; color: aqua; text-decoration: underline; } }}</style>
复制代码


那么实现的效果就如下图所示:


查看效果视频

二.vue3

为什么要分开说呢?因为在 vue3 中我们进行如下设置:


 {      path:'*',      component:()=>import('../views/404.vue')    }
复制代码


会产生错误,错误信息:Catch all routes ("*") must now be defined using a param with a custom regexp.,意思就是:现在必须使用与自定义Regexp的参数定义所有路由(“*”)。


那么官方是这么说的:


// plan on directly navigating to the not-found route using its name{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing{ path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
复制代码


那么我们 vue2 中的 index.js 文件中的代码就变成了如下:


...
export default new Router({ routes: [ ..., { path:'/:pathMatch(.*)*', component:()=>import('../views/404.vue') } //或者 { path:'/:pathMatch(.*)', component:()=>import('../views/404.vue') } ]})
复制代码


发布于: 刚刚阅读数: 4
用户头像

木偶

关注

凭时间赢来的东西,时间肯定会为之作证 2022-10-21 加入

CSDN前端领域优质创作者,CSDN博客专家,擅长PC端以及Uniapp开发

评论

发布
暂无评论
一文看懂Vue2和Vue3中设置404界面_Vue_木偶_InfoQ写作社区