From f9ff87c70898aae74ecc67ffedd4a5d264c0aaae Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Mon, 19 Apr 2021 19:22:24 +0800
Subject: [PATCH] feat: add refresh route

---
 src/layout/components/tag/tagsHook.ts |  77 +++---
 src/layout/index.vue                  |  16 +-
 src/router/index.ts                   | 379 +++++++++++++++-----------
 src/utils/algorithm/index.ts          |  14 +-
 src/views/redirect.vue                |  26 ++
 5 files changed, 304 insertions(+), 208 deletions(-)
 create mode 100644 src/views/redirect.vue

diff --git a/src/layout/components/tag/tagsHook.ts b/src/layout/components/tag/tagsHook.ts
index 254e19aaf..83158f0f2 100644
--- a/src/layout/components/tag/tagsHook.ts
+++ b/src/layout/components/tag/tagsHook.ts
@@ -1,85 +1,88 @@
-import { reactive, toRefs, nextTick } from "vue"
-import { storageLocal } from "/@/utils/storage"
-import { useRouter } from "vue-router"
+import { reactive, toRefs, nextTick } from "vue";
+import { storageLocal } from "/@/utils/storage";
+import { useRouter } from "vue-router";
 
 interface InterDynamic {
-  dRoutes: object[],
-  [propName: string]: any
+  dRoutes: object[];
+  [propName: string]: any;
 }
 
 // 默认显示首页tag
 let dynamic: InterDynamic = reactive({
   dRoutes: [
     {
-      path: "/welcome", meta: {
+      path: "/welcome",
+      meta: {
         title: "home",
-        icon: 'el-icon-s-home',
+        icon: "el-icon-s-home",
         showLink: true,
         savedPosition: false,
-      }
-    }]
-})
+      },
+    },
+  ],
+});
 
 export function useDynamicRoutesHook() {
-  const router = useRouter()
+  const router = useRouter();
   /**
    * @param value string 当前menu对应的路由path
    * @param parentPath string 当前路由中父级路由
    */
   const dynamicRouteTags = (value: string, parentPath: string): void => {
     const hasValue = dynamic.dRoutes.some((item: any) => {
-      return item.path === value
-    })
+      return item.path === value;
+    });
 
     function concatPath(arr: object[], value: string, parentPath: string) {
       if (!hasValue) {
         arr.forEach((arrItem: any) => {
-          let pathConcat = parentPath + '/' + arrItem.path
+          let pathConcat = parentPath + "/" + arrItem.path;
           if (arrItem.path === value || pathConcat === value) {
-            dynamic.dRoutes.push({ path: value, meta: arrItem.meta })
+            dynamic.dRoutes.push({ path: value, meta: arrItem.meta });
             // console.log(dynamic.dRoutes)
           } else {
             if (arrItem.children && arrItem.children.length > 0) {
-              concatPath(arrItem.children, value, parentPath)
+              concatPath(arrItem.children, value, parentPath);
             }
           }
-        })
+        });
       }
     }
-    concatPath(router.options.routes, value, parentPath)
+    concatPath(router.options.routes, value, parentPath);
 
-    if (storageLocal.getItem("routesInStorage") && storageLocal.getItem("routesInStorage").length > 2) {
-      let lens = storageLocal.getItem("routesInStorage").length
-      let itemss = storageLocal.getItem("routesInStorage")[lens - 1]
-      dynamic.dRoutes.push({ path: itemss.path, meta: itemss.meta })
-    }
+    // if (storageLocal.getItem("routesInStorage") && storageLocal.getItem("routesInStorage").length > 2) {
+    //   let lens = storageLocal.getItem("routesInStorage").length
+    //   let itemss = storageLocal.getItem("routesInStorage")[lens - 1]
+    //   dynamic.dRoutes.push({ path: itemss.path, meta: itemss.meta })
+    // }
 
-    storageLocal.setItem("routesInStorage", dynamic.dRoutes)
-  }
+    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+  };
   /**
    * @param value any 当前删除tag路由
    * @param current objct 当前激活路由对象
    */
   const deleteDynamicTag = async (obj: any, current: object): Promise<any> => {
     let valueIndex: number = dynamic.dRoutes.findIndex((item: any) => {
-      return item.path === obj.path
-    })
+      return item.path === obj.path;
+    });
     // 从当前匹配到的路径中删除
-    await dynamic.dRoutes.splice(valueIndex, 1)
-    storageLocal.setItem("routesInStorage", dynamic.dRoutes)
-    if (current === obj.path) { // 如果删除当前激活tag就自动切换到最后一个tag
-      let newRoute: any = dynamic.dRoutes.slice(-1)
+    await dynamic.dRoutes.splice(valueIndex, 1);
+    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+    if (current === obj.path) {
+      // 如果删除当前激活tag就自动切换到最后一个tag
+      let newRoute: any = dynamic.dRoutes.slice(-1);
       nextTick(() => {
         router.push({
-          path: newRoute[0].path
-        })
-      })
+          path: newRoute[0].path,
+        });
+      });
     }
-  }
+  };
 
   return {
     ...toRefs(dynamic),
     dynamicRouteTags,
-    deleteDynamicTag
-  }
+    deleteDynamicTag,
+  };
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7f852a3dd..9f1b67af1 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -16,7 +16,7 @@
           <!-- 右侧功能按钮 -->
           <ul class="right-func">
             <li>
-              <i class="el-icon-refresh-right"></i>
+              <i class="el-icon-refresh-right" @click="onFresh"></i>
             </li>
             <li>
               <i class="el-icon-arrow-down"></i>
@@ -58,6 +58,7 @@ import { useEventListener, useFullscreen } from "@vueuse/core";
 import { toggleClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
 import options from "/@/settings";
+import { useRouter, useRoute } from "vue-router";
 
 interface setInter {
   sidebar: any;
@@ -78,6 +79,9 @@ export default {
   setup() {
     const store = useStore();
 
+    const router = useRouter();
+    const route = useRoute();
+
     const WIDTH = ref(992);
 
     let containerHiddenSideBar = ref(options.hiddenSideBar);
@@ -149,6 +153,13 @@ export default {
       }
     }
 
+    function onFresh() {
+      const { path, fullPath } = unref(route);
+      router.replace({
+        path: "/redirect" + fullPath
+      });
+    }
+
     onMounted(() => {
       const isMobile = $_isMobile();
       if (isMobile) {
@@ -170,7 +181,8 @@ export default {
       ...toRefs(set),
       handleClickOutside,
       containerHiddenSideBar,
-      onFullScreen
+      onFullScreen,
+      onFresh
     };
   }
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index bded36e31..347578249 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,118 +1,153 @@
-import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router"
+import {
+  createRouter,
+  createWebHistory,
+  createWebHashHistory,
+  RouteRecordRaw,
+} from "vue-router";
 
-import Layout from '../layout/index.vue'
+import Layout from "../layout/index.vue";
 
-import { storageSession } from "../utils/storage"
+import { storageSession } from "../utils/storage";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    name: 'home',
+    path: "/",
+    name: "home",
     component: Layout,
     redirect: "/welcome",
-    children: [{
-      path: '/welcome',
-      name: 'welcome',
-      component: () => import(/* webpackChunkName: "home" */ '../views/welcome.vue'),
-      meta: {
-        title: 'home',
-        showLink: true,
-        savedPosition: false
-      }
-    }],
-    meta: {
-      icon: 'el-icon-s-home',
-      showLink: true,
-      savedPosition: false,
-    }
-  },
-  {
-    path: '/components',
-    name: 'components',
-    component: Layout,
-    redirect: '/components/split-pane',
     children: [
       {
-        path: '/components/video',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/video/index.vue'),
+        path: "/welcome",
+        name: "welcome",
+        component: () =>
+          import(/* webpackChunkName: "home" */ "../views/welcome.vue"),
         meta: {
-          title: 'video',
+          title: "home",
+          showLink: true,
+          savedPosition: false,
+        },
+      },
+    ],
+    meta: {
+      icon: "el-icon-s-home",
+      showLink: true,
+      savedPosition: false,
+    },
+  },
+  {
+    path: "/components",
+    name: "components",
+    component: Layout,
+    redirect: "/components/split-pane",
+    children: [
+      {
+        path: "/components/video",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/video/index.vue"
+          ),
+        meta: {
+          title: "video",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/map',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/map/index.vue'),
+        path: "/components/map",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/map/index.vue"
+          ),
         meta: {
-          title: 'map',
+          title: "map",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/draggable',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/draggable/index.vue'),
+        path: "/components/draggable",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/draggable/index.vue"
+          ),
         meta: {
-          title: 'draggable',
+          title: "draggable",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/split-pane',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/split-pane/index.vue'),
+        path: "/components/split-pane",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/split-pane/index.vue"
+          ),
         meta: {
-          title: 'split-pane',
+          title: "split-pane",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/button',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/button/index.vue'),
+        path: "/components/button",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/button/index.vue"
+          ),
         meta: {
-          title: 'button',
+          title: "button",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/cropping',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/cropping/index.vue'),
+        path: "/components/cropping",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/cropping/index.vue"
+          ),
         meta: {
-          title: 'cropping',
+          title: "cropping",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/countTo',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/count-to/index.vue'),
+        path: "/components/countTo",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/count-to/index.vue"
+          ),
         meta: {
-          title: 'countTo',
+          title: "countTo",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/selector',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/selector/index.vue'),
+        path: "/components/selector",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/selector/index.vue"
+          ),
         meta: {
-          title: 'selector',
+          title: "selector",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/components/seamlessScroll',
-        component: () => import(/* webpackChunkName: "components" */ '../views/components/seamless-scroll/index.vue'),
+        path: "/components/seamlessScroll",
+        component: () =>
+          import(
+            /* webpackChunkName: "components" */ "../views/components/seamless-scroll/index.vue"
+          ),
         meta: {
-          title: 'seamless',
+          title: "seamless",
           showLink: false,
-          savedPosition: true
-        }
-      }
+          savedPosition: true,
+        },
+      },
       // {
       //   path: '/components/flowChart',
       //   component: () => import(/* webpackChunkName: "components" */ '../views/components/flow-chart/index.vue'),
@@ -124,146 +159,165 @@ const routes: Array<RouteRecordRaw> = [
       // }
     ],
     meta: {
-      icon: 'el-icon-menu',
-      title: 'components',
+      icon: "el-icon-menu",
+      title: "components",
       showLink: true,
-      savedPosition: true
-    }
+      savedPosition: true,
+    },
   },
   {
-    path: '/flowChart',
-    name: 'flowChart',
+    path: "/flowChart",
+    name: "flowChart",
     component: Layout,
-    redirect: '/flowChart/index',
+    redirect: "/flowChart/index",
     children: [
       {
-        path: '/flowChart/index',
-        component: () => import(/* webpackChunkName: "user" */ '../views/flow-chart/index.vue'),
+        path: "/flowChart/index",
+        component: () =>
+          import(
+            /* webpackChunkName: "user" */ "../views/flow-chart/index.vue"
+          ),
         meta: {
-          title: 'flowChart',
+          title: "flowChart",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
     ],
     meta: {
-      icon: 'el-icon-set-up',
-      title: 'flowChart',
+      icon: "el-icon-set-up",
+      title: "flowChart",
       showLink: true,
-      savedPosition: true
-    }
+      savedPosition: true,
+    },
   },
   {
-    path: '/editor',
-    name: 'editor',
+    path: "/editor",
+    name: "editor",
     component: Layout,
-    redirect: '/editor/index',
+    redirect: "/editor/index",
     children: [
       {
-        path: '/editor/index',
-        component: () => import(/* webpackChunkName: "user" */ '../views/editor/index.vue'),
+        path: "/editor/index",
+        component: () =>
+          import(/* webpackChunkName: "user" */ "../views/editor/index.vue"),
         meta: {
           // icon: 'el-icon-edit-outline',
-          title: 'editor',
+          title: "editor",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
     ],
     meta: {
-      icon: 'el-icon-edit-outline',
-      title: 'editor',
+      icon: "el-icon-edit-outline",
+      title: "editor",
       showLink: true,
-      savedPosition: true
-    }
+      savedPosition: true,
+    },
   },
   {
-    path: '/user',
-    name: 'user',
+    path: "/user",
+    name: "user",
     component: Layout,
-    redirect: '/user/base',
+    redirect: "/user/base",
     children: [
       {
-        path: '/user/base',
-        component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'),
+        path: "/user/base",
+        component: () =>
+          import(/* webpackChunkName: "user" */ "../views/user.vue"),
         meta: {
           // icon: 'el-icon-user',
-          title: 'baseinfo',
+          title: "baseinfo",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
     ],
     meta: {
-      icon: 'el-icon-user',
-      title: 'usermanagement',
+      icon: "el-icon-user",
+      title: "usermanagement",
       showLink: true,
-      savedPosition: true
-    }
+      savedPosition: true,
+    },
   },
   {
-    path: '/error',
-    name: 'error',
+    path: "/error",
+    name: "error",
     component: Layout,
-    redirect: '/error/401',
+    redirect: "/error/401",
     children: [
       {
-        path: '/error/401',
-        component: () => import(/* webpackChunkName: "error" */ '../views/error/401.vue'),
+        path: "/error/401",
+        component: () =>
+          import(/* webpackChunkName: "error" */ "../views/error/401.vue"),
         meta: {
-          title: '401',
+          title: "401",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
       {
-        path: '/error/404',
-        component: () => import(/* webpackChunkName: "error" */ '../views/error/404.vue'),
+        path: "/error/404",
+        component: () =>
+          import(/* webpackChunkName: "error" */ "../views/error/404.vue"),
         meta: {
-          title: '404',
+          title: "404",
           showLink: false,
-          savedPosition: true
-        }
+          savedPosition: true,
+        },
       },
     ],
     meta: {
-      icon: 'el-icon-position',
-      title: 'error',
+      icon: "el-icon-position",
+      title: "error",
       showLink: true,
-      savedPosition: true
-    }
+      savedPosition: true,
+    },
   },
   {
-    path: '/login',
-    name: 'login',
-    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'),
+    path: "/login",
+    name: "login",
+    component: () =>
+      import(/* webpackChunkName: "login" */ "../views/login.vue"),
     meta: {
-      title: '登陆',
-      showLink: false
-    }
+      title: "登陆",
+      showLink: false,
+    },
   },
   {
-    path: '/register',
-    name: 'register',
-    component: () => import(/* webpackChunkName: "register" */ '../views/register.vue'),
+    path: "/register",
+    name: "register",
+    component: () =>
+      import(/* webpackChunkName: "register" */ "../views/register.vue"),
     meta: {
-      title: '注册',
-      showLink: false
-    }
+      title: "注册",
+      showLink: false,
+    },
   },
   {
     // 找不到路由重定向到404页面
-    path: '/:pathMatch(.*)',
+    path: "/:pathMatch(.*)",
     component: Layout,
     redirect: "/error/404",
     meta: {
-      icon: 'el-icon-s-home',
-      title: '首页',
+      icon: "el-icon-s-home",
+      title: "首页",
       showLink: false,
       savedPosition: false,
-    }
+    },
   },
-]
+  {
+    path: "/redirect",
+    component: Layout,
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        component: () => import("../views/redirect.vue"),
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -271,30 +325,33 @@ const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
     return new Promise((resolve, reject) => {
       if (savedPosition) {
-        return savedPosition
+        return savedPosition;
       } else {
         if (from.meta.saveSrollTop) {
-          const top: number = document.documentElement.scrollTop || document.body.scrollTop
-          resolve({ left: 0, top })
+          const top: number =
+            document.documentElement.scrollTop || document.body.scrollTop;
+          resolve({ left: 0, top });
         }
       }
-    })
-  }
-})
+    });
+  },
+});
 
-import NProgress from "../utils/progress"
+import NProgress from "../utils/progress";
 
-const whiteList = ["/login", "/register"]
+const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, _from, next) => {
-  NProgress.start()
+  NProgress.start();
   // @ts-ignore
-  document.title = to.meta.title // 动态title
-  whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info") ? next() : next("/login") // 全部重定向到登录页
-})
+  document.title = to.meta.title; // 动态title
+  whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
+    ? next()
+    : next("/login"); // 全部重定向到登录页
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});
 
-export default router
+export default router;
diff --git a/src/utils/algorithm/index.ts b/src/utils/algorithm/index.ts
index ed7266592..82c5fcf9a 100644
--- a/src/utils/algorithm/index.ts
+++ b/src/utils/algorithm/index.ts
@@ -1,10 +1,9 @@
 interface ProxyAlgorithm {
-  increaseIndexes<T>(val: Array<T>): Array<T>
+  increaseIndexes<T>(val: Array<T>): Array<T>;
 }
 
 class algorithmProxy implements ProxyAlgorithm {
-
-  constructor() { }
+  constructor() {}
 
   // 数组每一项添加索引字段
   public increaseIndexes<T>(val: Array<T>): Array<T> {
@@ -13,12 +12,11 @@ class algorithmProxy implements ProxyAlgorithm {
         return {
           // @ts-ignore
           ...val[v],
-          key: v
-        }
+          key: v,
+        };
       })
-      .filter(v => v.meta.showLink)
+      .filter((v) => v.meta && v.meta.showLink);
   }
-
 }
 
-export const algorithm = new algorithmProxy()
\ No newline at end of file
+export const algorithm = new algorithmProxy();
diff --git a/src/views/redirect.vue b/src/views/redirect.vue
new file mode 100644
index 000000000..97afb42a0
--- /dev/null
+++ b/src/views/redirect.vue
@@ -0,0 +1,26 @@
+<template>
+  <div></div>
+</template>
+<script lang="ts">
+import { defineComponent, unref } from "vue";
+import { useRouter } from "vue-router";
+
+export default defineComponent({
+  name: "Redirect",
+  setup() {
+    const { currentRoute, replace } = useRouter();
+
+    const { params, query } = unref(currentRoute);
+    const { path } = params;
+
+    const _path = Array.isArray(path) ? path.join("/") : path;
+
+    replace({
+      path: "/" + _path,
+      query
+    });
+
+    return {};
+  }
+});
+</script>