fix: 路由bug

config/proxy.ts

@@ -6,7 +6,8 @@
 module.exports = {
   dev: {
     '/rts-api': {
-      target: 'http://124.222.113.37:8080',
+      target: 'http://ugknfjq1tyqbshsh3.neiwangyun.net',
+      // target: 'http://124.222.113.37:8080',
       changeOrigin: true,
       pathRewrite: { '^/rts-api': '' }
     },

src/layout/components/Sidebar/SidebarItem.vue

@@ -30,8 +30,10 @@
 import path from 'path-browserify'
 import { reactive, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAppRouter } from '@/store/router'
 import Icon from './Icon'
 
+const appRouter = useAppRouter()
 const RootRouter = useRouter()
 const props = defineProps({
   // 每一个router Item
@@ -48,6 +50,7 @@ const props = defineProps({
 
 const changeRoute = (route: ROUTER.RoutesProps) => {
   RootRouter.push(route.path)
+  appRouter.setCurrentRoute(route.path)
 }
 
 const state = reactive({

src/layout/components/Sidebar/index.vue

@@ -32,20 +32,33 @@ import { onMounted, ref, watch } from 'vue'
 import { useAppRouter } from '@/store/router'
 import SidebarItem from './SidebarItem.vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useEmitter } from '@/hooks'
+import { Emitter } from '@/enum'
 
 const appRouter = useAppRouter()
-const route = useRoute()
+
+const rootRouter = useRouter()
 
 const collapsed = ref<boolean>(false)
 
-const selectedKeys2 = ref<string[]>([])
+const selectedKeys2 = ref<string[]>([appRouter.router.sider.selectPath])
 const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
 
+const emitter = useEmitter()
+
 // 如果是产品类型这种 需要找到父节点 设置openKeys
 // 刷新后也需要打开openKeys
 
+emitter.on(Emitter.NAVBAR, () => {
+  console.log('Emitter.NAVBAR', appRouter.router.sider.selectPath)
+
+  selectedKeys2.value = [appRouter.router.sider.selectPath]
+})
+
 onMounted(() => {
-  selectedKeys2.value = [route.path]
+  selectedKeys2.value = [appRouter.currentRoute!]
+
+  rootRouter.push(appRouter.currentRoute!)
 })
 </script>
 

src/layout/navbar.vue

@@ -45,43 +45,45 @@ const route = useRoute()
 
 const appRouter = useAppRouter()
 
-console.log('router:', router.currentRoute)
-// [appRouter.$state.router.navbar.selectPath]
-
 const selectedKeys = ref<string[]>()
 
 const changeRouter = (path: string) => {
   console.log('changeRouter:', path)
 
-  selectedKeys.value = path
-  appRouter.changeNavbar(path)
+  selectedKeys.value = [path]
+  appRouter.changeNavbar(path, '')
 }
 
-console.log('routes', routes)
-
-const navbarRoutes = ['/', 'rts']
-
-// const active = computed(() => {
-//   routes.forEach( item => {
-//     item
-//   })
-// })
-
 const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
   let r = false
   children.forEach(item => {
+    console.log(item.path, route.path)
+
     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 => {
+    console.log(hasCurrentRourte(item.children))
+
     if (hasCurrentRourte(item.children)) {
+      console.log('item.path:', item.path)
+
       selectedKeys.value = [item.path]
-      appRouter.changeNavbar(item.path)
+      appRouter.changeNavbar(item.path, 'init')
       appRouter.changeSiderRoute()
     }
   })

src/layout/sider.vue

@@ -65,12 +65,12 @@ const collapsed = ref<boolean>(false)
 const selectedKeys2 = ref<string[]>([appRouter.router.sider!.selectPath])
 const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
 
-emitter.on(Emitter.NAVBAR, () => {
-  selectedKeys2.value = [appRouter.router.sider!.selectPath]
-  openKeys.value = appRouter.router.sider!.openKeys
-})
+// emitter.on(Emitter.NAVBAR, () => {
+//   selectedKeys2.value = [appRouter.router.sider!.selectPath]
+//   openKeys.value = appRouter.router.sider!.openKeys
+// })
 
-const changeRoute = (route: Router.RoutesProps) => {
+const changeRoute = (route: ROUTER.RoutesProps) => {
   RootRouter.push(route.path)
 }
 

src/store/router.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ConstantStore } from '@/enum/store'
 import { ref, computed, onMounted, watch, reactive, watchEffect } from 'vue'
 import RootRouter from '@/router'
-import { useLocalStorageState } from 'vue-hooks-plus'
+import { useSessionStorageState } from 'vue-hooks-plus'
 import { AppRouter as AppRouterEnum, Emitter } from '@/enum'
 import { useEmitter } from '@/hooks/index'
 import { useRoute } from 'vue-router'
@@ -31,6 +31,10 @@ const initAppRouterState: ROUTER.RouterRecords = {
 export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   const appRouter = reactive<ROUTER.RouterRecords>(initAppRouterState)
 
+  const [currentRoute, setCurrentRoute] = useSessionStorageState<string>('currentRoute', {
+    defaultValue: '/'
+  })
+
   // const [appRouterState, setAppRouterState] = useLocalStorageState<ROUTER.RouterRecords>(AppRouterEnum.ROUTER, {
   //   defaultValue: initAppRouterState
   // })
@@ -40,6 +44,8 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   const siderRoutes = computed(() => RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children)
 
   const initAppRouter = () => {
+    console.log('initAppRouter')
+
     appRouter.navbar.route = RootRouter.options.routes.map(route => {
       return {
         path: route.path,
@@ -47,14 +53,20 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
       }
     })
 
-    appRouter.navbar.selectPath = RootRouter.options.routes[0].path
+    // appRouter.navbar.selectPath = RootRouter.options.routes[0].path
+    appRouter.navbar.selectPath = currentRoute.value!
 
     appRouter.sider.route = siderRoutes.value!
+
+    appRouter.sider.selectPath = currentRoute.value!
   }
 
-  const changeNavbar = (path: string) => {
+  const changeNavbar = (path: string, key: 'init' | '' = '') => {
+    console.log('changeNavbar:', path, currentRoute.value)
+
     RootRouter.push(path)
     appRouter.navbar.selectPath = path
+    setCurrentRoute(key === 'init' ? currentRoute.value! : siderRoutes.value![0].path)
   }
 
   watch(
@@ -63,8 +75,6 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   )
 
   const changeSiderRoute = () => {
-    console.log(' appRouter.navbar!.selectPath:', appRouter.navbar!.selectPath)
-
     appRouter.sider = {
       route: RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children as ROUTER.RoutesProps[],
       selectPath: RootRouter.currentRoute.value.path,
@@ -76,9 +86,22 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   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
+    changeSiderRoute,
+    setCurrentRoute
   }
 })