增加tab模式以及tab缓存

src/views/HomeView.vue

@@ -2,9 +2,11 @@
 import LeftMenu from '@/layout/LeftMenu.vue'
 import TopNav from '@/layout/TopNav.vue'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useTabsViewStore } from '@/stores/TabsViewStore'
 import { GlobalLayoutMode } from '@/consts/GlobalConstants'
 import { computed } from 'vue'
 const globalConfigStore = useGlobalConfigStore()
+const tabsViewStore = useTabsViewStore()
 const showLeftMenu = computed(() => {
   return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT
 })
@@ -23,16 +25,21 @@ const showLeftMenu = computed(() => {
       <el-header>
         <top-nav />
       </el-header>
+      <el-header v-if="tabsViewStore.isTabMode">
+        <common-tabs-view />
+      </el-header>
       <el-main>
         <router-view v-slot="{ Component, route }">
           <transition
             name="slide-fade"
             mode="out-in"
           >
-            <component
-              :is="Component"
-              :key="route.fullPath"
-            />
+            <KeepAlive :include="tabsViewStore.cachedTabs">
+              <component
+                :is="Component"
+                :key="route.fullPath"
+              />
+            </KeepAlive>
           </transition>
         </router-view>
       </el-main>

src/views/admin/Authority.vue

@@ -1,5 +1,9 @@
 <script setup>
-
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+onMounted(() => {
+  console.info('=========mounted', useRoute().path)
+})
 </script>
 
 <template>

src/views/admin/Menus.vue

@@ -1,5 +1,9 @@
 <script setup>
-
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+onMounted(() => {
+  console.info('=========mounted', useRoute().path)
+})
 </script>
 
 <template>

src/views/admin/Roles.vue

@@ -1,5 +1,9 @@
 <script setup>
-
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+onMounted(() => {
+  console.info('=========mounted', useRoute().path)
+})
 </script>
 
 <template>

src/views/admin/Users.vue

@@ -1,5 +1,9 @@
 <script setup>
-
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+onMounted(() => {
+  console.info('=========mounted', useRoute().path)
+})
 </script>
 
 <template>