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

2026-07-09 15:40:56 +08:00
parent 8bca4191f2
commit ee9cd057b8
6 changed files with 233 additions and 193 deletions
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -1,128 +1,130 @@
-<template>
-    <div>
-        <component :is="config.layout.layoutMode"></component>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { useConfig } from '@/stores/config'
-import { useNavTabs } from '@/stores/navTabs'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { useDictData } from '@/stores/dictData'
-import { useRoute } from 'vue-router'
-import Default from '@/layouts/admin/container/default.vue'
-import Classic from '@/layouts/admin/container/classic.vue'
-import Streamline from '@/layouts/admin/container/streamline.vue'
-import Double from '@/layouts/admin/container/double.vue'
-import { onMounted, onBeforeMount } from 'vue'
-import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
-import router from '@/router/index'
-import { useEventListener } from '@vueuse/core'
-import { isEmpty } from 'lodash-es'
-import { setNavTabsWidth } from '@/utils/layout'
-import { adminBaseRoutePath } from '@/router/static'
-import { getRouteMenu, dictDataCache } from '@/api/auth'
-import { getAreaList, areaSelect } from '@/api/common'
-import { BasicDictData } from '@/stores/interface'
-import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
-
-defineOptions({
-    components: { Default, Classic, Streamline, Double }
-})
-
-const navTabs = useNavTabs()
-const config = useConfig()
-const route = useRoute()
-const adminInfo = useAdminInfo()
-const dictData = useDictData()
-const state = reactive({
-    autoMenuCollapseLock: false
-})
-
-onMounted(() => {
-    // if (!adminInfo.token) return router.push({ name: 'login' })
-
-    init()
-    setNavTabsWidth()
-    useEventListener(window, 'resize', setNavTabsWidth)
-})
-onBeforeMount(() => {
-    onAdaptiveLayout()
-    useEventListener(window, 'resize', onAdaptiveLayout)
-})
-
-const init = async () => {
-    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(), getAllUserSimpleList()]).then(res => {
-        dictData.state.area = res[0].data
-        dictData.state.basic = res[1].data
-        dictData.state.userList = res[4].data
-        adminInfo.dataFill(res[2].data)
-        dictData.state.areaTree = res[3].data
-    })
-    /**
-     * 后台初始化请求，获取站点配置，动态路由等信息
-     */
-    getRouteMenu().then((res: any) => {
-        const handlerMenu = (data: any) => {
-            data.forEach((item: any) => {
-                item.routePath =
-                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
-                item.path = item.routePath
-                item.name = item.routePath
-                item.keepalive = item.routePath
-                item.component = item.routeName
-                    ? item.routeName.indexOf('/src/views/') > -1
-                        ? item.routeName
-                        : `/src/views/${item.routeName}/index.vue`
-                    : ''
-                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
-                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
-                if (item.children) {
-                    handlerMenu(item.children)
-                }
-
-            })
-        }
-        handlerMenu(res.data)
-        handleAdminRoute(res.data)
-        if (route.params.to) {
-            const lastRoute = JSON.parse(route.params.to as string)
-            if (lastRoute.path != adminBaseRoutePath) {
-                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
-                routePush({ path: lastRoute.path, query: query })
-                return
-            }
-        }
-        // 跳转到第一个菜单
-        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-        if (firstRoute) routePush(firstRoute.path)
-    })
-}
-
-const onAdaptiveLayout = () => {
-    let defaultBeforeResizeLayout = {
-        layoutMode: config.layout.layoutMode,
-        menuCollapse: config.layout.menuCollapse
-    }
-
-    const clientWidth = document.body.clientWidth
-    if (clientWidth < 1024) {
-        /**
-         * 锁定窗口改变自动调整 menuCollapse
-         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
-         */
-        if (!state.autoMenuCollapseLock) {
-            state.autoMenuCollapseLock = true
-            config.setLayout('menuCollapse', true)
-        }
-        config.setLayout('shrink', true)
-        config.setLayoutMode('Classic')
-    } else {
-        state.autoMenuCollapseLock = false
-        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
-        config.setLayout('shrink', false)
-        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
-    }
-}
-</script>
+<template>
+    <div>
+        <component :is="config.layout.layoutMode"></component>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useConfig } from '@/stores/config'
+import { useNavTabs } from '@/stores/navTabs'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { useDictData } from '@/stores/dictData'
+import { useRoute } from 'vue-router'
+import Default from '@/layouts/admin/container/default.vue'
+import Classic from '@/layouts/admin/container/classic.vue'
+import Streamline from '@/layouts/admin/container/streamline.vue'
+import Double from '@/layouts/admin/container/double.vue'
+import { onMounted, onBeforeMount } from 'vue'
+import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
+import router from '@/router/index'
+import { useEventListener } from '@vueuse/core'
+import { isEmpty } from 'lodash-es'
+import { setNavTabsWidth } from '@/utils/layout'
+import { adminBaseRoutePath } from '@/router/static'
+import { getRouteMenu, dictDataCache } from '@/api/auth'
+import { getAreaList, areaSelect } from '@/api/common'
+import { BasicDictData } from '@/stores/interface'
+import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
+
+defineOptions({
+    components: { Default, Classic, Streamline, Double }
+})
+
+const navTabs = useNavTabs()
+const config = useConfig()
+const route = useRoute()
+const adminInfo = useAdminInfo()
+const dictData = useDictData()
+const state = reactive({
+    autoMenuCollapseLock: false
+})
+
+onMounted(() => {
+    // if (!adminInfo.token) return router.push({ name: 'login' })
+
+    init()
+    setNavTabsWidth()
+    useEventListener(window, 'resize', setNavTabsWidth)
+})
+onBeforeMount(() => {
+    onAdaptiveLayout()
+    useEventListener(window, 'resize', onAdaptiveLayout)
+})
+
+const init = async () => {
+    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(), getAllUserSimpleList()]).then(res => {
+        dictData.state.area = res[0].data
+        dictData.state.basic = res[1].data
+        dictData.state.userList = res[4].data
+        adminInfo.dataFill(res[2].data)
+        dictData.state.areaTree = res[3].data
+    })
+    /**
+     * 后台初始化请求，获取站点配置，动态路由等信息
+     */
+    getRouteMenu().then((res: any) => {
+        const handlerMenu = (data: any) => {
+            data.forEach((item: any) => {
+                item.routePath =
+                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
+                item.path = item.routePath
+                item.name = item.routePath
+                item.keepalive = item.routePath
+                item.component = item.routeName
+                    ? item.routeName.indexOf('/src/views/') > -1
+                        ? item.routeName
+                        : `/src/views/${item.routeName}/index.vue`
+                    : ''
+                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
+                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
+                if (item.children) {
+                    handlerMenu(item.children)
+                }
+
+            })
+        }
+        handlerMenu(res.data)
+        handleAdminRoute(res.data)
+        if (route.params.to) {
+            const lastRoute = JSON.parse(route.params.to as string)
+            if (lastRoute.path != adminBaseRoutePath) {
+                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+                routePush({ path: lastRoute.path, query: query })
+                return
+            }
+        }
+        // 仅在 loading 页时跳转到第一个菜单，避免覆盖用户当前页面
+        if (route.name === 'adminMainLoading') {
+            const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+            if (firstRoute) routePush(firstRoute.path)
+        }
+    })
+}
+
+const onAdaptiveLayout = () => {
+    let defaultBeforeResizeLayout = {
+        layoutMode: config.layout.layoutMode,
+        menuCollapse: config.layout.menuCollapse
+    }
+
+    const clientWidth = document.body.clientWidth
+    if (clientWidth < 1024) {
+        /**
+         * 锁定窗口改变自动调整 menuCollapse
+         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
+         */
+        if (!state.autoMenuCollapseLock) {
+            state.autoMenuCollapseLock = true
+            config.setLayout('menuCollapse', true)
+        }
+        config.setLayout('shrink', true)
+        config.setLayoutMode('Classic')
+    } else {
+        state.autoMenuCollapseLock = false
+        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
+        config.setLayout('shrink', false)
+        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
+    }
+}
+</script>
--- a/src/layouts/admin/router-view/main.vue
+++ b/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)
        }
--- a/src/layouts/common/components/loading.vue
+++ b/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>
--- a/src/router/static.ts
+++ b/src/router/static.ts
@@ -346,7 +346,7 @@ const staticRoutes: Array<RouteRecordRaw> = [

    {
        // 后台找不到页面了-可能是路由未加载上
-        path: adminBaseRoutePath + ':path(.*)*',
+        path: adminBaseRoutePath + '/:path(.*)*',
        redirect: to => {
            return {
                name: 'adminMainLoading',
--- a/src/utils/request.ts
+++ b/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)
--- a/src/utils/router.ts
+++ b/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':