feat: 集成重新加载页面功能

src/layout/components/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
   <router-view v-slot="{ Component, route }">
     <transition name="fade-slide" mode="out-in" appear>
-      <div :key="route.path">
+      <div v-if="appStore.reloadFlag" :key="route.path">
         <keep-alive :include="keepAliveRouteNames">
           <component :is="Component" />
         </keep-alive>
@@ -13,6 +13,9 @@
 <script setup>
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
 const router = useRouter()
 const allRoutes = router.getRoutes()
 const keepAliveRouteNames = computed(() => {

src/layout/components/sidebar/SideMenu.vue

@@ -19,9 +19,11 @@ import { NIcon } from 'naive-ui'
 import { IconCircle, IconMenu } from '@/components/AppIcons'
 
 import { isExternal } from '@/utils/is'
+import { useAppStore } from '@/store/modules/app'
 
 const router = useRouter()
 const permissionStore = usePermissionStore()
+const appStore = useAppStore()
 const { currentRoute } = router
 
 const menuOptions = computed(() => {
@@ -83,14 +85,12 @@ function handleMenuSelect(key, item) {
   if (isExternal(item.path)) {
     window.open(item.path)
   } else {
-    router.push(item.path)
+    if (item.path === currentRoute.value.path && !currentRoute.value.meta?.keepAlive) {
+      appStore.reloadPage()
+    } else {
+      router.push(item.path)
+    }
   }
-
-  // 通过path重定向
-  // router.push({
-  //   path: '/redirect',
-  //   query: { redirect: item.path },
-  // })
 }
 </script>
 

src/store/modules/app.js

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { nextTick } from 'vue'
+
+export const useAppStore = defineStore('app', {
+  state() {
+    return {
+      reloadFlag: true,
+    }
+  },
+  actions: {
+    async reloadPage() {
+      $loadingBar.start()
+      this.reloadFlag = false
+      await nextTick()
+      this.reloadFlag = true
+
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 })
+        $loadingBar.finish()
+      }, 100)
+    },
+  },
+})

src/views/test-page/TestMessage.vue

@@ -5,6 +5,15 @@
 </template>
 
 <script setup>
+import { useAppStore } from '@/store/modules/app'
+import { onMounted } from 'vue'
+
+const appStore = useAppStore()
+
+onMounted(() => {
+  $message.success('onMounted')
+})
+
 function handleLogin() {
   $message.loading('登陆中...')
   setTimeout(() => {