在app.vue中定义一个变量,来记录是否显示断网
data() {
return {
transitionName: "",
net: false //是否显示断网
};
},
mounted中检测是否断网
mounted() {
// 检测断网
window.addEventListener("offline", () => {
console.log("已断网");
this.net = true;
});
window.addEventListener("online", () => {
console.log("网络已连接");
this.net = false;
});
}
断网显示图片替换内容
<template>
<div id="app">
<!-- <transition :name="transitionName"> -->
<!-- 断网显示的图片,使用转换工具转换成base64格式,才可以显示 -->
<img
class="nonet"
v-if="net"
src="https://img-blog.csdnimg.cn/2022010619471849985.png"
alt
/>
<router-view v-else />
<!-- </transition> -->
<!-- footer是一个标签名,不能使用 -->
<app-footer v-show="$route.meta.ifShowFooter"></app-footer>
</div>
</template>