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

src/layouts/admin/index.vue

@@ -94,9 +94,11 @@ const init = async () => {
                 return
             }
         }
-        // 跳转到第一个菜单
+        // 仅在 loading 页时跳转到第一个菜单，避免覆盖用户当前页面
-        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+        if (route.name === 'adminMainLoading') {
-        if (firstRoute) routePush(firstRoute.path)
+            const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+            if (firstRoute) routePush(firstRoute.path)
+        }
     })
 }
 

src/layouts/admin/router-view/main.vue

@@ -1,9 +1,9 @@
 <template>
     <el-main class="layout-main" :style="mainHeight()">
         <router-view v-slot="{ Component }">
-            <transition :name="config.layout.mainAnimation" mode="out-in">
+            <transition :name="config.layout.mainAnimation">
                 <keep-alive :include="state.keepAliveComponentNameList">
-                    <component :is="Component" :key="state.componentKey" />
+                    <component :is="Component" :key="state.componentKey || undefined" />
                 </keep-alive>
             </transition>
         </router-view>
@@ -32,7 +32,7 @@ const state: {
     componentKey: string
     keepAliveComponentNameList: string[]
 } = reactive({
-    componentKey: route.path,
+    componentKey: '',
     keepAliveComponentNameList: []
 })
 
@@ -79,7 +79,6 @@ onMounted(() => {
 watch(
     () => route.path,
     () => {
-        state.componentKey = route.path
         if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
             addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
         }

src/layouts/common/components/loading.vue

@@ -5,7 +5,7 @@
             element-loading-background="var(--ba-bg-color-overlay)"
             element-loading-text="加载中"
             class="default-main ba-main-loading"
-                   :style="{ height:'calc(100vh - 170px)'}"
+            :style="{ height: 'calc(100vh - 170px)' }"
         ></div>
         <div v-if="state.showReload" class="loading-footer mt10">
             <el-button @click="refresh" type="warning">重新加载</el-button>
@@ -14,26 +14,65 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, reactive } from 'vue'
+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,
+    showReload: false
 })
 
-const refresh = () => {
+const tryRedirect = () => {
-    router.go(0)
+    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
 }
-// if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
+
-//     let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+const refresh = () => {
-//     if (firstRoute) routePush(firstRoute.path)
+    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

src/router/static.ts

@@ -346,7 +346,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
 
     {
         // 后台找不到页面了-可能是路由未加载上
-        path: adminBaseRoutePath + ':path(.*)*',
+        path: adminBaseRoutePath + '/:path(.*)*',
         redirect: to => {
             return {
                 name: 'adminMainLoading',

src/utils/request.ts

@@ -179,7 +179,6 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
                                 return Axios(response.config)
                             })
                             .catch(err => {
-                                window.location.reload()
                                 adminInfo.removeToken()
                                 router.push({ name: 'login' })
                                 return Promise.reject(err)

src/utils/router.ts

@@ -70,6 +70,7 @@ export const onClickMenu = (menu: RouteRecordRaw) => {
     switch (menu.meta?.menu_type) {
         case 'iframe':
         case 'tab':
+            if (router.currentRoute.value.path === menu.path) return
             routePush({ path: menu.path })
             break
         case 'link':