优化菜单切换导致浏览器刷新问题

src/layouts/common/components/loading.vue

@@ -1,59 +1,98 @@
-<template>
-    <div>
-        <div
-            v-loading="true"
-            element-loading-background="var(--ba-bg-color-overlay)"
-            element-loading-text="加载中"
-            class="default-main ba-main-loading"
-                   :style="{ height:'calc(100vh - 170px)'}"
-        ></div>
-        <div v-if="state.showReload" class="loading-footer mt10">
-            <el-button @click="refresh" type="warning">重新加载</el-button>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onUnmounted, reactive } from 'vue'
-import router from '@/router/index'
-import { useNavTabs } from '@/stores/navTabs'
-import { isAdminApp } from '@/utils/common'
-import { getFirstRoute, routePush } from '@/utils/router'
-let timer: number
-
-const navTabs = useNavTabs()
-const state = reactive({
-    maximumWait: 1000 * 6,
-    showReload: false,
-})
-
-const refresh = () => {
-    router.go(0)
-}
-// if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
-//     let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-//     if (firstRoute) routePush(firstRoute.path)
-// }
-
-timer = window.setTimeout(() => {
-    state.showReload = true
-}, state.maximumWait)
-
-onUnmounted(() => {
-    clearTimeout(timer)
-})
-</script>
-
-<style scoped lang="scss">
-.ba-main-loading {
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.loading-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-</style>
+<template>
+    <div>
+        <div
+            v-loading="true"
+            element-loading-background="var(--ba-bg-color-overlay)"
+            element-loading-text="加载中"
+            class="default-main ba-main-loading"
+            :style="{ height: 'calc(100vh - 170px)' }"
+        ></div>
+        <div v-if="state.showReload" class="loading-footer mt10">
+            <el-button @click="refresh" type="warning">重新加载</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import router from '@/router/index'
+import { useNavTabs } from '@/stores/navTabs'
+import { isAdminApp } from '@/utils/common'
+import { getFirstRoute, routePush } from '@/utils/router'
+import { isEmpty } from 'lodash-es'
+import { adminBaseRoutePath } from '@/router/static'
+
+let timer: number
+
+const route = useRoute()
+const navTabs = useNavTabs()
+const state = reactive({
+    maximumWait: 1000 * 6,
+    showReload: false
+})
+
+const tryRedirect = () => {
+    if (route.params.to) {
+        try {
+            const lastRoute = JSON.parse(route.params.to as string)
+            if (lastRoute.path && lastRoute.path !== adminBaseRoutePath) {
+                const query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+                routePush({ path: lastRoute.path, query })
+                return true
+            }
+        } catch (error) {
+            console.error(error)
+        }
+    }
+    if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
+        const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+        if (firstRoute) {
+            routePush(firstRoute.path)
+            return true
+        }
+    }
+    return false
+}
+
+const refresh = () => {
+    if (!tryRedirect()) {
+        router.replace(route.fullPath)
+    }
+}
+
+onMounted(() => {
+    if (tryRedirect()) return
+
+    const stop = watch(
+        () => navTabs.state.tabsViewRoutes.length,
+        len => {
+            if (len > 0 && tryRedirect()) {
+                stop()
+            }
+        }
+    )
+})
+
+timer = window.setTimeout(() => {
+    state.showReload = true
+}, state.maximumWait)
+
+onUnmounted(() => {
+    clearTimeout(timer)
+})
+</script>
+
+<style scoped lang="scss">
+.ba-main-loading {
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.loading-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>