fix: setting redirect after refresh page router push bug

mineadmin · Jul 9, 2024 · 6a7c0ac · 6a7c0ac
1 parent 58ee531
commit 6a7c0ac
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/layout/components/columns/ma-columns-menu.vue b/src/layout/components/columns/ma-columns-menu.vue
@@ -18,7 +18,10 @@
       >
         <li
           :class="`${classStyle}`"
-          @click="loadMenu(bigMenu, index)"
+          @click="() => {
+            keepAliveStore.menuLoader = false
+            loadMenu(bigMenu, index)
+          }"
         >
           <component v-if="bigMenu.meta.icon" :is="bigMenu.meta.icon" class="text-xl mt-1" />
           <span
@@ -46,24 +49,27 @@
   import { useRoute, useRouter } from 'vue-router'
   import MaMenu from '../ma-menu.vue'
 
-  import { useAppStore, useUserStore } from '@/store'
+  import { useAppStore, useUserStore, useKeepAliveStore } from '@/store'
 
   const route = useRoute()
   const router = useRouter()
 
   const MaMenuRef = ref(null)
   const appStore = useAppStore()
   const userStore = useUserStore()
+  const keepAliveStore = useKeepAliveStore()
   const showMenu = ref(false)
 
   const title = ref('')
   const classStyle = ref('flex flex-col parent-menu items-center rounded mt-1 text-gray-200 hover:bg-gray-700 dark:hover:text-gray-50 dark:hover:bg-blackgray-1')
 
   onMounted(() => {
+    keepAliveStore.menuLoader = true
     initMenu(true)
   })
 
   watch(() => route, v => {
+    keepAliveStore.menuLoader = false
     initMenu(false)
   }, { deep: true })
 
@@ -74,6 +80,7 @@
     } else {
       current = 'home'
     }
+    console.log(current)
     if (userStore.routers && userStore.routers.length > 0) {
       userStore.routers.map((item, index) => {
         if (item.name == current) loadMenu(item, index, init)
@@ -87,7 +94,7 @@
       return
     }
     if (bigMenu.children.length > 0) {
-      if (bigMenu.redirect && isInit) {
+      if (bigMenu.redirect && isInit && !keepAliveStore.menuLoader) {
         router.push(bigMenu.redirect)
       }
       MaMenuRef.value.loadChildMenu(bigMenu)

diff --git a/src/layout/components/mixed/index.vue b/src/layout/components/mixed/index.vue
@@ -15,7 +15,10 @@
         <span class="ml-2 text-xl mt-2.5 hidden md:block">{{ $title }}</span>
       </div>
       <div class="flex justify-between w-full layout-banner">
-        <top-menu v-model="userStore.routers" :active="active" @go="loadMenu" ref="topMenuRef" />
+        <top-menu v-model="userStore.routers" :active="active" @go="(bigMenu, index) => {
+            keepAliveStore.menuLoader = false
+            loadMenu(bigMenu, index)
+          }" ref="topMenuRef" />
         <ma-operation />
       </div>
     </a-layout-header>
@@ -42,7 +45,7 @@
 
 <script setup>
   import { ref, watch, onMounted } from 'vue'
-  import { useAppStore, useUserStore } from '@/store'
+  import { useAppStore, useUserStore, useKeepAliveStore } from '@/store'
   import { useRoute, useRouter } from 'vue-router'
   import ResizeObserver from 'resize-observer-polyfill'
   import MaOperation from '../ma-operation.vue'
@@ -58,14 +61,17 @@
   const MaMenuRef = ref(null)
   const userStore = useUserStore()
   const appStore = useAppStore()
+  const keepAliveStore = useKeepAliveStore()
   const showMenu = ref(false)
   const active = ref()
 
   onMounted(() => {
+    keepAliveStore.menuLoader = true
     initMenu(true)
   })
 
   watch(() => route, v => {
+    keepAliveStore.menuLoader = false
     initMenu(false)
   }, { deep: true })
 
@@ -88,7 +94,7 @@
       return
     }
     if (bigMenu.children.length > 0) {
-      if (bigMenu.redirect && isInit) {
+      if (bigMenu.redirect && isInit && !keepAliveStore.menuLoader) {
         router.push(bigMenu.redirect)
       }
       MaMenuRef.value.loadChildMenu(bigMenu)

diff --git a/src/store/modules/keepAlive.js b/src/store/modules/keepAlive.js
@@ -3,7 +3,8 @@ import { defineStore } from 'pinia'
 const useKeepAliveStore = defineStore('keepAlive', {
   state: () => ({
     keepAlives: [],
-    show: true
+    show: true,
+    menuLoader: false,
   }),
 
   getters: {