feat: 500网络断开

src/router/index.ts

@@ -7,7 +7,8 @@ import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/modules/user-info";
 import { useRoutesListStore } from "@/store/modules/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
-
+// import { useRoute } from "vue-router";
+// const route = useRoute();
 /**
  * 创建vue的路由示例
  * @method createRouter(options: RouterOptions): Router
@@ -41,7 +42,12 @@ router.beforeEach(async (to, from, next) => {
   const store = useUserInfoStore(pinia);
   const { token } = storeToRefs(store);
   console.log("去", to, "来自", from);
-  if (to.path === "/login" && !token.value) {
+  // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
+  // 浏览器离线，条件：网络离线、跳转路径非 /500
+  // 这里拦截的是在无网络情况下的正常跳转，跳转500
+  if (!navigator.onLine && to.path !== "/500") {
+    next("/500"); // 跳转500
+  } else if (to.path === "/login" && !token.value) {
     // 1、去登录页，无token，放行
     next();
   } else if (!token.value) {
@@ -53,6 +59,10 @@ router.beforeEach(async (to, from, next) => {
     // 项目内的跳转，处理跳转路由高亮
     currentlyRoute(to.name as string);
   } else {
+    // 无网络，跳转500，放行
+    if (!navigator.onLine && to.path == "/500") {
+      return next();
+    }
     // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
     const routeStore = useRoutesListStore(pinia);
     const { routeTree } = storeToRefs(routeStore);

src/router/route.ts

@@ -676,10 +676,19 @@ export const staticRoutes = [
 export const notFoundAndNoPower = [
   {
     path: "/401", // 无权限，跳转401
-    name: "no-power",
+    name: "no-access",
     component: () => import("@/views/error/401.vue"),
     meta: {
-      title: "not-power",
+      title: "no-access",
+      hide: true
+    }
+  },
+  {
+    path: "/500", // 无网络-浏览器离线
+    name: "no-network",
+    component: () => import("@/views/error/500.vue"),
+    meta: {
+      title: "no-network",
       hide: true
     }
   },

src/views/custom-instruction/anti-shake/anti-shake.vue

@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { Message } from "@arco-design/web-vue";
 const onClick = () => {
-  Message.info("0.5s后执行了");
+  Message.success("0.5s后执行了");
 };
 </script>
 

src/views/custom-instruction/throttle/throttle.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { Message } from "@arco-design/web-vue";
 const onClick = () => {
-  Message.info("节流执行了");
+  Message.success("节流执行了");
 };
 </script>
 

src/views/error/500.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="page-404">
+    <div>
+      <SvgIcon name="网络断开" :size="500" />
+    </div>
+    <div class="prompt">
+      <div class="title">500</div>
+      <div class="text">抱歉，无网络连接~</div>
+      <a-button type="primary" v-throttle="onBack">立即返回</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message } from "@arco-design/web-vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const onBack = () => {
+  if (!navigator.onLine) {
+    Message.error("网络未连接");
+  } else {
+    router.go(-1);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-404 {
+  height: 100vh;
+  box-sizing: border-box;
+  padding: $padding;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .prompt {
+    width: 250px;
+    row-gap: $padding;
+  }
+  .title {
+    font-size: 80px;
+    color: $color-text-1;
+  }
+  .text {
+    font-size: $font-size-body-3;
+    color: $color-text-2;
+    margin-bottom: $padding;
+  }
+}
+</style>