From a4089d4499386e46daec211bf79c314990c656f4 Mon Sep 17 00:00:00 2001
From: zory <791736813@qq.com>
Date: Tue, 19 Apr 2022 20:38:44 +0800
Subject: [PATCH] =?UTF-8?q?fix=20topnav=E4=B8=80=E7=BA=A7=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E8=B7=B3=E8=BD=AC=E5=A4=B1=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopNav/index.vue | 133 +++++++++++++++++---------------
 src/store/modules/permission.js |  14 ++--
 2 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 510179d..86e2497 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -21,137 +21,142 @@
 </template>
 
 <script setup>
-import { constantRoutes } from "@/router";
-import { isHttp } from "@/utils/validate";
+import { constantRoutes } from '@/router'
+import { isHttp } from '@/utils/validate'
+import { useRouter } from 'vue-router'
 
 // 顶部栏初始数
-const visibleNumber = ref(5);
+const visibleNumber = ref(5)
 // 是否为首次加载
-const isFrist = ref(false);
+const isFrist = ref(false)
 // 当前激活菜单的 index
-const currentIndex = ref(null);
+const currentIndex = ref(undefined)
 
-const store = useStore();
-const route = useRoute();
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
 
 // 主题颜色
-const theme = computed(() => store.state.settings.theme);
+const theme = computed(() => store.state.settings.theme)
 // 所有的路由信息
-const routers = computed(() => store.state.permission.topbarRouters);
+const routers = computed(() => store.state.permission.topbarRouters)
 
 // 顶部显示菜单
 const topMenus = computed(() => {
-  let topMenus = [];
+  let topMenus = []
   routers.value.map((menu) => {
     if (menu.hidden !== true) {
       // 兼容顶部栏一级菜单内部跳转
-      if (menu.path === "/") {
-        topMenus.push(menu.children[0]);
+      if (menu.path === '/') {
+        topMenus.push(menu.children[0])
       } else {
-        topMenus.push(menu);
+        topMenus.push(menu)
       }
     }
-  });
-  return topMenus;
-});
+  })
+  return topMenus
+})
 
 // 设置子路由
 const childrenMenus = computed(() => {
-  let childrenMenus = [];
+  let childrenMenus = []
   routers.value.map((router) => {
     for (let item in router.children) {
       if (router.children[item].parentPath === undefined) {
-        if (router.path === "/") {
-          router.children[item].path =
-            "/redirect/" + router.children[item].path;
+        if (router.path === '/') {
+          router.children[item].path = '/redirect/' + router.children[item].path
         } else {
           if (!isHttp(router.children[item].path)) {
             router.children[item].path =
-              router.path + "/" + router.children[item].path;
+              router.path + '/' + router.children[item].path
           }
         }
-        router.children[item].parentPath = router.path;
+        router.children[item].parentPath = router.path
       }
-      childrenMenus.push(router.children[item]);
+      childrenMenus.push(router.children[item])
     }
-  });
-  return constantRoutes.concat(childrenMenus);
-});
+  })
+  return constantRoutes.concat(childrenMenus)
+})
 
 // 默认激活的菜单
 const activeMenu = computed(() => {
-  const path = route.path;
-  let activePath = defaultRouter.value;
-  if (path.lastIndexOf("/") > 0) {
-    const tmpPath = path.substring(1, path.length);
-    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-  } else if ("/index" == path || "" == path) {
+  const path = route.path
+  let activePath = defaultRouter.value
+  if (path.lastIndexOf('/') > 0) {
+    const tmpPath = path.substring(1, path.length)
+    activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
+  } else if ('/index' == path || '' == path) {
     if (!isFrist.value) {
-      isFrist.value = true;
+      isFrist.value = true
     } else {
-      activePath = "index";
+      activePath = 'index'
     }
   }
-  let routes = activeRoutes(activePath);
+  let routes = activeRoutes(activePath)
   if (routes.length === 0) {
-    activePath = currentIndex.value || defaultRouter.value;
-    activeRoutes(activePath);
+    activePath = currentIndex.value || defaultRouter.value
+
+    console.log('activePath', activePath)
+    activeRoutes(activePath)
   }
-  return activePath;
-});
+  return activePath
+})
 // 默认激活的路由
 const defaultRouter = computed(() => {
-  let router;
+  let router
   Object.keys(routers.value).some((key) => {
     if (!routers.value[key].hidden) {
-      router = routers.value[key].path;
-      return true;
+      router = routers.value[key].path
+      return true
     }
-  });
-  return router;
-});
+  })
+
+  return router
+})
 function setVisibleNumber() {
-  const width = document.body.getBoundingClientRect().width / 3;
-  visibleNumber.value = parseInt(width / 85);
+  const width = document.body.getBoundingClientRect().width / 3
+  visibleNumber.value = parseInt(width / 85)
 }
 function handleSelect(key, keyPath) {
-  currentIndex.value = key;
+  currentIndex.value = key
   if (isHttp(key)) {
     // http(s):// 路径新窗口打开
-    window.open(key, "_blank");
-  } else if (key.indexOf("/redirect") !== -1) {
+    window.open(key, '_blank')
+  } else if (key.indexOf('/redirect') !== -1) {
     // /redirect 路径内部打开
     router.push({ path: key.replace("/redirect", "") }).catch(err => {});
   } else {
     // 显示左侧联动菜单
-    activeRoutes(key);
+    activeRoutes(key)
   }
 }
+// 当前激活的路由
 function activeRoutes(key) {
-  let routes = [];
+  var routes = []
   if (childrenMenus.value && childrenMenus.value.length > 0) {
     childrenMenus.value.map((item) => {
-      if (key == item.parentPath || (key == "index" && "" == item.path)) {
-        routes.push(item);
+      if (key == item.parentPath || (key == 'index' && '' == item.path)) {
+        routes.push(item)
       }
-    });
+    })
   }
   if (routes.length > 0) {
-    store.commit("SET_SIDEBAR_ROUTERS", routes);
+    store.commit('SET_SIDEBAR_ROUTERS', routes)
   }
-  return routes;
+  return routes
 }
 
 onMounted(() => {
-  window.addEventListener("resize", setVisibleNumber);
-});
+  window.addEventListener('resize', setVisibleNumber)
+})
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", setVisibleNumber);
-});
+  window.removeEventListener('resize', setVisibleNumber)
+})
 
 onMounted(() => {
-  setVisibleNumber();
-});
+  setVisibleNumber()
+})
 </script>
 
 <style lang="scss">
@@ -164,7 +169,7 @@ onMounted(() => {
 //   margin: 0 10px !important;
 // }
 .el-menu--horizontal {
-	border-bottom: 0px !important;
+  border-bottom: 0px !important;
 }
 // .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
 // .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index dd4398a..40dbc66 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -39,14 +39,14 @@ const permission = {
         getRouters().then(res => {
           const sdata = JSON.parse(JSON.stringify(res.data))
           const rdata = JSON.parse(JSON.stringify(res.data))
-          const defaultData = JSON.parse(JSON.stringify(res.data))
+          //const defaultData = JSON.parse(JSON.stringify(res.data))
           const sidebarRoutes = filterAsyncRouter(sdata)
           const rewriteRoutes = filterAsyncRouter(rdata, false, true)
-          const defaultRoutes = filterAsyncRouter(defaultData)
+          //const defaultRoutes = filterAsyncRouter(defaultData)
           commit('SET_ROUTES', rewriteRoutes)
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
           commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', defaultRoutes)
+          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
           resolve(rewriteRoutes)
         })
       })
@@ -66,9 +66,11 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
         route.component = Layout
       } else if (route.component === 'ParentView') {
         route.component = ParentView
-      } else if (route.component === 'InnerLink') {
-        route.component = InnerLink
-      } else {
+      } 
+      // else if (route.component === 'InnerLink') {
+      //   route.component = InnerLink
+      // } 
+      else {
         route.component = loadView(route.component)
       }
     }