浅谈vue3项目404页面与网络错误页面的配置

浅谈vue3项目404页面与网络错误页面的配置

404页面

• 于路由的index.js配置页面中配置404页面的路由

import Nofound from '../components/404.vue'
const routes = [
    ...
	{ path: '/:pathMatch(.*)*', name: 'nofound', component: Nofound }
]

注：以上nofound路由的声明应在routes的最后面，且vue2项目中不需要使用正则（path: ‘*’）

• 于components创建404.vue，并设计相关样式

<template>
	<div class="no_found_page">
		<div class="img"><img :src="require('@/assets/images/404.png')" alt=""></div>
		<p><span>很抱歉，您访问的页面不存在</span><br>请检查您访问的网址是否正确，或者联系管理员处理</p>
		<p><span>点击</span><router-link class="a" to="/">返回首页</router-link></p>
	</div>
</template>
<style lang="css">
.no_found_page{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100% - 56px - env(safe-area-inset-bottom)); padding-bottom: 30px;}
.no_found_page .img{ width: 260px;}
.no_found_page p{ width: 320px; font-size: 12px; color: #999; text-align: center; line-height: 2;}
.no_found_page p span{ color: #666;}
.no_found_page p .a{ display: inline-block; color: #1989FA;}
</style>
<script>
export default {
	name: "Nofound"
};
</script>

页面图片如下

网络错误页面

• 于路由的index.js配置网络错误时的路由

import Nowifi from '../components/Nowifi.vue'
const routes = [
    ...
	{ path: '/nowifi', name: 'Nowifi', component: Nowifi },
    ...
]

• 于components创建Nowifi.vue，并设计相关样式

<template>
	<div class="no_found_page">
		<div class="img"><img :src="require('@/assets/images/nowifi.png')" alt=""></div>
		<p>网络开小差了，请稍后再试~</p>
	</div>
</template>
<style lang="css">
.no_found_page{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100% - 56px - env(safe-area-inset-bottom)); padding-bottom: 30px;}
.no_found_page .img{ width: 260px;}
.no_found_page p{ width: 320px; font-size: 12px; color: #999; text-align: center; line-height: 2;}
.no_found_page p span{ color: #666;}
.no_found_page p .a{ display: inline-block; color: #1989FA;}
</style>
<script>
export default {
	name: "Nowifi"
};
</script>

• 于src下的App.vue页面中编写如下代码进行检测网络错误时的跳转

import { useRouter } from "vue-router";
export default {
	setup() {
		const route = useRouter();
		onMounted(() => {
			console.log('当前页面的路由是：', route);
			//网络错误处理
			window.addEventListener('offline', ()=>{
				sessionStorage.locationUrl = route.currentRoute.value.fullPath;
				route.replace('/nowifi');
			});
			window.addEventListener('online',()=>{
				route.push(sessionStorage.locationUrl);
			});
		})
	}
}

注：wifi已连接但是无网络情况下需要在请求接口500错误时另外配置路由跳转

更新：解决无网络时显示不了img

<div class="img"><svg viewBox="0 0 400 400" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="图层_1"><defs><div v-is="'style'">.cls-1{fill:url(#未命名的渐变_23);}.cls-2{fill:url(#未命名的渐变_36);}.cls-3{fill:url(#未命名的渐变_36-2);}.cls-4{fill:url(#未命名的渐变_10);}.cls-5{fill:url(#未命名的渐变_10-2);}.cls-6{fill:url(#未命名的渐变_10-3);}.cls-7{fill:#f0e6e5;}.cls-8{fill:url(#未命名的渐变_27);}.cls-9{fill:url(#未命名的渐变_27-2);}.cls-10{fill:url(#未命名的渐变_27-3);}.cls-11{fill:url(#未命名的渐变_36-3);}.cls-12{fill:url(#未命名的渐变_9);}.cls-13{fill:url(#未命名的渐变_9-2);}.cls-14{fill:url(#未命名的渐变_9-3);}</div><linearGradient gradientUnits="userSpaceOnUse" y2="379.32" x2="201.23" y1="221.26" x1="201.23" id="未命名的渐变_23"><stop stop-color="#f8f1f0" offset="0"></stop><stop stop-color="#fdfbfb" offset="0.48"></stop><stop stop-color="#fff" offset="1"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(-40.08 71.93) rotate(-12.77)" y2="259.78" x2="272.35" y1="243.48" x1="272.35" id="未命名的渐变_36"><stop stop-color="#fdfbfa" offset="0"></stop><stop stop-color="#f8efef" offset="0.24"></stop><stop stop-color="#f3e2e2" offset="0.64"></stop><stop stop-color="#f1dede" offset="1"></stop></linearGradient><linearGradient xlink:href="#未命名的渐变_36" gradientTransform="translate(51.81 -19.74) rotate(23.16)" y2="119.57" x2="113.39" y1="94.69" x1="113.39" id="未命名的渐变_36-2"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="166.5" x2="67.4" y1="231.11" x1="76.8" id="未命名的渐变_10"><stop stop-opacity="0.2" stop-color="#fdfbfa" offset="0"></stop><stop stop-opacity="0.37" stop-color="#fcf7f6" offset="0.12"></stop><stop stop-opacity="0.56" stop-color="#faf3f2" offset="0.27"></stop><stop stop-opacity="0.72" stop-color="#f8f0ef" offset="0.43"></stop><stop stop-opacity="0.84" stop-color="#f7edec" offset="0.58"></stop><stop stop-opacity="0.93" stop-color="#f7eceb" offset="0.72"></stop><stop stop-opacity="0.98" stop-color="#f6eae9" offset="0.87"></stop><stop stop-color="#f6eae9" offset="1"></stop></linearGradient><linearGradient xlink:href="#未命名的渐变_10" y2="76.81" x2="272.78" y1="157.95" x1="284.59" id="未命名的渐变_10-2"></linearGradient><linearGradient xlink:href="#未命名的渐变_10" y2="194.11" x2="314.72" y1="227.62" x1="319.59" id="未命名的渐变_10-3"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="194.7" x2="202.45" y1="140.57" x1="202.45" id="未命名的渐变_27"><stop stop-color="#f0e0df" offset="0"></stop><stop stop-color="#f0dedd" offset="0.05"></stop><stop stop-color="#ecd2d0" offset="0.54"></stop><stop stop-color="#ebcecc" offset="1"></stop></linearGradient><linearGradient xlink:href="#未命名的渐变_27" y2="226.35" x2="202.45" y1="184.72" x1="202.45" id="未命名的渐变_27-2"></linearGradient><linearGradient xlink:href="#未命名的渐变_27" y2="268.15" x2="202.45" y1="229.78" x1="202.45" id="未命名的渐变_27-3"></linearGradient><linearGradient xlink:href="#未命名的渐变_36" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" y2="166.78" x2="315.7" y1="114.81" x1="310.23" id="未命名的渐变_36-3"></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="294.92" x2="142.36" y1="126.43" x1="162.31" id="未命名的渐变_9"><stop stop-opacity="0.3" stop-color="#fff" offset="0"></stop><stop stop-opacity="0.28" stop-color="#fff" offset="0.03"></stop><stop stop-opacity="0.16" stop-color="#fff" offset="0.29"></stop><stop stop-opacity="0.07" stop-color="#fff" offset="0.55"></stop><stop stop-opacity="0.02" stop-color="#fff" offset="0.79"></stop><stop stop-opacity="0" stop-color="#fff" offset="1"></stop></linearGradient><linearGradient xlink:href="#未命名的渐变_9" y2="297.3" x2="162.43" y1="128.81" x1="182.39" id="未命名的渐变_9-2"></linearGradient><linearGradient xlink:href="#未命名的渐变_9" y2="299.79" x2="183.46" y1="131.3" x1="203.41" id="未命名的渐变_9-3"></linearGradient></defs><ellipse ry="78.92" rx="189.11" cy="303.28" cx="201.23" class="cls-1"></ellipse><circle r="8.15" cy="257.11" cx="281.16" class="cls-2"></circle><circle r="12.44" cy="122.53" cx="114.27" class="cls-3"></circle><path d="M102.34,197.29l-.69,0c-3.3-9.5-15.29-16.54-29.57-16.54-15.31,0-28,8.08-30.15,18.61-8.64,2.24-14.75,7.7-14.75,14.09,0,8.38,10.53,15.18,23.5,15.18a31,31,0,0,0,16.66-4.47,43.44,43.44,0,0,0,4.74.26,39.44,39.44,0,0,0,16.68-3.56,21.79,21.79,0,0,0,13.58,4.45c10.28,0,18.62-6.28,18.62-14S112.62,197.29,102.34,197.29Z" class="cls-4"></path><path d="M316.66,115.48c-.29,0-.58,0-.87,0-4.14-11.93-19.2-20.77-37.14-20.77-19.21,0-35.12,10.14-37.86,23.36-10.85,2.82-18.51,9.68-18.51,17.7,0,10.53,13.21,19.07,29.51,19.07,8.17,0,15.57-2.15,20.92-5.62a52.55,52.55,0,0,0,5.94.33,49.59,49.59,0,0,0,21-4.47,27.35,27.35,0,0,0,17.06,5.59c12.91,0,23.38-7.89,23.38-17.61S329.57,115.48,316.66,115.48Z" class="cls-5"></path><path d="M332.83,210.08h-.35c-1.71-4.92-7.93-8.57-15.34-8.57-7.93,0-14.5,4.18-15.63,9.64-4.48,1.17-7.65,4-7.65,7.31,0,4.35,5.46,7.88,12.19,7.88a16,16,0,0,0,8.64-2.33,21.94,21.94,0,0,0,2.45.14,20.36,20.36,0,0,0,8.65-1.85,11.26,11.26,0,0,0,7,2.31c5.34,0,9.66-3.25,9.66-7.27S338.17,210.08,332.83,210.08Z" class="cls-6"></path><ellipse ry="7.09" rx="30.26" cy="269.32" cx="201.23" class="cls-7"></ellipse><path d="M202.45,140.57a126,126,0,0,0-89.95,37.62L129,194.7a103,103,0,0,1,146.9,0l16.51-16.51A126,126,0,0,0,202.45,140.57Z" class="cls-8"></path><path d="M143.89,209.59l16.76,16.76a57.69,57.69,0,0,1,83.6,0L261,209.59a81.38,81.38,0,0,0-117.12,0Z" class="cls-9"></path><path d="M175.32,241l27.13,27.14L229.58,241a38.39,38.39,0,0,0-54.26,0Z" class="cls-10"></path><path d="M321.83,134.83l-8,8-8-8a4.33,4.33,0,0,0-6.11,0h0a4.32,4.32,0,0,0,0,6.1l8,8-8,8a4.32,4.32,0,0,0,6.11,6.1l8-8,8,8a4.32,4.32,0,0,0,6.1,0h0a4.3,4.3,0,0,0,0-6.1l-8-8,8-8a4.31,4.31,0,1,0-6.1-6.1Z" class="cls-11"></path><path d="M201.39,140.59a126,126,0,0,0-88.89,37.6L129,194.7a102.72,102.72,0,0,1,72.56-30.77Z" class="cls-12"></path><path d="M201.71,184.74a81.16,81.16,0,0,0-57.82,24.85l16.76,16.76a57.54,57.54,0,0,1,41.23-17.92Z" class="cls-13"></path><path d="M202,229.79A38.25,38.25,0,0,0,175.32,241l27,27Z" class="cls-14"></path></svg></div>

代码如上，我是使用的iconfont复制svg代码，经测试可解决该问题。

注意：vue3中直接保存复制的svg代码会导致报错如下
需要使用 <div v-is="'style'"></div> 代替 <style></style> 解决