fix: 优化路由极其菜单逻辑

src/layout/components/Sidebar/SidebarItem.vue

@@ -50,7 +50,6 @@ const changeRoute = (route: ROUTER.RoutesProps) => {
     window.open(route.path)
   } else {
     RootRouter.push(route.path)
-    appRouter.setCurrentRoute(route.path)
   }
 }
 

src/layout/components/Sidebar/index.vue

@@ -11,14 +11,14 @@
           <img :src="logoPng" alt="">
         </div>
         <a-menu
-          v-model:selectedKeys="selectedKeys2"
+          v-model:selectedKeys="selectedKeys"
           :openKeys="openKeys"
           mode="inline"
           :style="{ borderRight: 0 }"
         >
           <sidebar-item
             :item="route"
-            v-for="route in appRouter.router.sider.route"
+            v-for="route in sidebarRoute"
             :key="route.path"
             :base-path="route.path"
           />
@@ -29,12 +29,10 @@
 
 <script lang="ts" setup >
 
-import { onMounted, ref, computed } from 'vue'
-import { useAppRouter } from '@/store/router'
+import { ref, computed, watch } from 'vue'
+
 import SidebarItem from './SidebarItem.vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useEmitter } from '@/hooks'
-import { Emitter } from '@/enum'
 import { useDesignStore } from '@/store'
 
 const logoPng = require('@/assets/logo.png')
@@ -43,31 +41,32 @@ const designStore = useDesignStore()
 
 const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
 
-const appRouter = useAppRouter()
+const route = useRoute()
 
-const rootRouter = useRouter()
+const router = useRouter()
 
 const collapsed = ref<boolean>(false)
 
-const selectedKeys2 = ref<string[]>([appRouter.router.sider.selectPath])
-const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
-
-console.log('appRouter:', appRouter)
+const sidebarRoute = ref<any>()
 
-// const emitter = useEmitter()
+const selectedKeys = ref<string[]>()
 
-// 如果是产品类型这种 需要找到父节点 设置openKeys
-// 刷新后也需要打开openKeys
+const openKeys = ref<string[]>()
 
-// emitter.on(Emitter.NAVBAR, () => {
-//   selectedKeys2.value = [appRouter.router.sider.selectPath]
-// })
-
-// onMounted(() => {
-//   selectedKeys2.value = [appRouter.currentRoute!]
+watch(
+  () => route.path,
+  () => {
+    sidebarRoute.value = router.getRoutes().find(item => item.path === route.matched[0].path)?.children
+    console.log('route.matched.', route.matched)
+    console.log(openKeys)
+    selectedKeys.value = [route.path]
+    openKeys.value = [route.matched[1].path]
+  },
+  {
+    immediate: true
+  }
+)
 
-//   rootRouter.push(appRouter.currentRoute!)
-// })
 </script>
 
 <style lang="less" scoped >

src/layout/navbar.vue

@@ -31,19 +31,20 @@
 </template>
 
 <script lang="ts" setup >
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useAppRouter } from '@/store/router'
 import user from './user.vue'
-import { useRoute } from 'vue-router'
-import { routes } from '@/router/index'
+import { useRoute, useRouter } from 'vue-router'
 import { IconTsx } from '@/components/MicroComponents/index'
 import { useDesignStore } from '@/store'
 
 const route = useRoute()
 
+const router = useRouter()
+
 const appRouter = useAppRouter()
 
-const selectedKeys = ref<string[]>()
+const selectedKeys = ref<string[]>([route.matched[0].path])
 
 const designStore = useDesignStore()
 
@@ -60,39 +61,10 @@ const changeRouter = (route: ROUTER.RoutesProps) => {
     window.open(route.path)
   } else {
     selectedKeys.value = [route.path]
-    appRouter.changeNavbar(route.path, '')
+    router.push(route.path)
   }
 }
 
-const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
-  let r = false
-  children.forEach(item => {
-    if (item.path === route.path) {
-      r = true
-    }
-
-    if (item.children && item.children.length) {
-      item.children.forEach(_ => {
-        if (_.path === route.path) {
-          r = true
-        }
-      })
-    }
-  })
-
-  return r
-}
-
-onMounted(() => {
-  // routes.forEach(item => {
-  //   if (item.children && hasCurrentRourte(item.children)) {
-  //     selectedKeys.value = [item.path]
-  //     appRouter.changeNavbar(item.path, 'init')
-  //     appRouter.changeSiderRoute()
-  //   }
-  // })
-})
-
 </script>
 
 <style lang="less" scoped >

src/store/router.ts

@@ -31,65 +31,28 @@ const initAppRouterState: ROUTER.RouterRecords = {
 export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   const appRouter = reactive<ROUTER.RouterRecords>(initAppRouterState)
 
-  const [currentRoute, setCurrentRoute] = useSessionStorageState<string>('currentRoute', {
-    defaultValue: '/'
-  })
-
-  const siderRoutes = computed(() => RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children)
-
   const initAppRouter = () => {
     appRouter.navbar.route = RootRouter.options.routes.map((route: any) => {
       return {
         path: route.link ? route.path.substr(1) : route.path,
         name: route.name,
-        link: !!route.link
+        link: !!route.link,
+        redirect: route.redirect || ''
       }
     })
 
-    // appRouter.sider.selectPath = currentRoute.value!
+    appRouter.sider.route = RootRouter.options.routes[0].children!
   }
 
-  const changeNavbar = (path: string, key: 'init' | '' = '') => {
-    console.log('changeNavbar:', path, currentRoute.value)
-
+  const changeNavbar = (path: string) => {
     RootRouter.push(path)
-    appRouter.navbar.selectPath = path
-    setCurrentRoute(key === 'init' ? currentRoute.value! : siderRoutes.value![0].path)
-  }
-
-  watch(
-    () => RootRouter.currentRoute.value.path,
-    () => changeSiderRoute()
-  )
-
-  const changeSiderRoute = () => {
-    appRouter.sider = {
-      route: RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children as ROUTER.RoutesProps[],
-      selectPath: RootRouter.currentRoute.value.path,
-      openKeys: RootRouter.currentRoute.value.matched.map(item => item.path)
-    }
-    emitter.emit(Emitter.NAVBAR)
   }
 
   if (appRouter.navbar.route.length === 0) {
     initAppRouter()
   }
 
-  const cancheCurrentRoute = () => {
-    appRouter.sider.selectPath = currentRoute.value!
-    // RootRouter.push(currentRoute.value!)
-  }
-
-  // 通过session store 保存当前的路由 防止刷新丢失路由
-  onMounted(() => {
-    cancheCurrentRoute()
-  })
-
   return {
-    router: appRouter,
-    currentRoute,
-    changeNavbar,
-    changeSiderRoute,
-    setCurrentRoute
+    router: appRouter
   }
 })