@@@@@@

library/components/VabRouterView/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition mode="out-in" :name="theme.pageTransition">
+      <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
+        <component :is="Component" :key="routerKey" ref="componentRef" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+
+<script setup>
+import { useHead } from '@vueuse/head'
+import VabProgress from 'nprogress'
+import { keepAliveMaxNum } from '/@/config'
+import { useSettingsStore } from '/@/store/modules/settings'
+import { useTabsStore } from '/@/store/modules/tabs'
+import { handleActivePath } from '/@/utils/routes'
+
+defineOptions({
+  name: 'VabRouterView',
+})
+
+const route = useRoute()
+const settingsStore = useSettingsStore()
+const { theme } = storeToRefs(settingsStore)
+const tabsStore = useTabsStore()
+const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
+const componentRef = ref()
+const routerKey = ref()
+const keepAliveNameList = ref()
+const siteData = reactive({
+  description: '',
+})
+
+useHead({
+  meta: [
+    {
+      name: `description`,
+      content: computed(() => siteData.description),
+    },
+  ],
+})
+
+const updateKeepAliveNameList = (refreshRouteName = null) => {
+  keepAliveNameList.value = visitedRoutes.value
+    .filter((item) => !item.meta.noKeepAlive && item.name !== refreshRouteName)
+    .flatMap((item) => item.name)
+}
+
+// 更新KeepAlive缓存页面
+watchEffect(() => {
+  routerKey.value = handleActivePath(route, true)
+  updateKeepAliveNameList()
+  siteData.description = `迪联科技`
+})
+
+onBeforeMount(() => {
+  $sub('reload-router-view', (refreshRouteName = route.name) => {
+    if (theme.value.showProgressBar) VabProgress.start()
+    const cacheActivePath = routerKey.value
+    routerKey.value = null
+    updateKeepAliveNameList(refreshRouteName)
+    nextTick(() => {
+      routerKey.value = cacheActivePath
+      updateKeepAliveNameList()
+    })
+    setTimeout(() => {
+      if (theme.value.showProgressBar) VabProgress.done()
+    }, 200)
+  })
+})
+</script>