fix: Fix sidebar route navigation without page refresh

apache · Feb 24, 2025 · 6a45815 · 6a45815
1 parent 0dbe888
commit 6a45815
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/bigtop-manager-ui/src/layouts/index.vue b/bigtop-manager-ui/src/layouts/index.vue
@@ -55,7 +55,7 @@
         @on-sider-click="menuStore.onSiderClick"
       />
       <a-layout class="layout-inner">
-        <router-view />
+        <router-view :key="$route.fullPath" />
         <layout-footer />
       </a-layout>
     </a-layout>

diff --git a/bigtop-manager-ui/src/layouts/sider.vue b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { toRefs, ref } from 'vue'
+  import { toRefs, ref, watch } from 'vue'
   import { useRouter } from 'vue-router'
   import { RouteExceptions } from '@/enums'
   import { useMenuStore } from '@/store/menu'
@@ -31,20 +31,31 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
-    siderMenuSelectedKey: '',
-    siderMenus: () => []
+    siderMenuSelectedKey: ''
   })
 
-  const { siderMenuSelectedKey, siderMenus } = toRefs(props)
+  const { siderMenuSelectedKey } = toRefs(props)
   const router = useRouter()
   const menuStore = useMenuStore()
+  const menus = ref<MenuItem[]>([])
   const emits = defineEmits(['onSiderClick'])
   const clusterStatus = ref<Record<ClusterStatusType, string>>({
     1: 'success',
     2: 'error',
     3: 'warning'
   })
 
+  watch(
+    () => props.siderMenus,
+    (val) => {
+      menus.value = []
+      menus.value = val
+    },
+    {
+      deep: true
+    }
+  )
+
   const toggleActivatedIcon = (menuItem: MenuItem) => {
     const { key, icon } = menuItem
     if (menuStore.isDynamicRouteMatched) {
@@ -66,7 +77,7 @@
 <template>
   <a-layout-sider class="sider">
     <a-menu :selected-keys="[siderMenuSelectedKey]" mode="inline" @select="onSiderClick">
-      <template v-for="menuItem in siderMenus" :key="menuItem.key">
+      <template v-for="menuItem in menus" :key="menuItem.key">
         <a-sub-menu
           v-if="menuItem.children && menuItem.name === RouteExceptions.SPECIAL_ROUTE_NAME"
           :key="menuItem.key"