index.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <router-view v-slot="{ Component }">
  3. <transition mode="out-in" :name="theme.pageTransition">
  4. <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
  5. <component :is="Component" :key="routerKey" ref="componentRef" />
  6. </keep-alive>
  7. </transition>
  8. </router-view>
  9. </template>
  10. <script lang="ts" setup>
  11. import { useHead } from '@vueuse/head'
  12. import VabProgress from 'nprogress'
  13. import { keepAliveMaxNum } from '/@/config'
  14. import { useSettingsStore } from '/@/store/modules/settings'
  15. import { useTabsStore } from '/@/store/modules/tabs'
  16. import { handleActivePath } from '/@/utils/routes'
  17. defineOptions({
  18. name: 'VabRouterView',
  19. })
  20. const route = useRoute()
  21. const $sub = inject<any>('$sub')
  22. const settingsStore = useSettingsStore()
  23. const { theme } = storeToRefs(settingsStore)
  24. const tabsStore = useTabsStore()
  25. const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
  26. const componentRef = ref<any>()
  27. const routerKey = ref<any>()
  28. const keepAliveNameList = ref<any>()
  29. const siteData = reactive<any>({
  30. description: '',
  31. })
  32. useHead({
  33. meta: [
  34. {
  35. name: `description`,
  36. content: computed(() => siteData.description),
  37. },
  38. ],
  39. })
  40. const updateKeepAliveNameList = (refreshRouteName = null) => {
  41. keepAliveNameList.value = visitedRoutes.value
  42. .filter((item) => !item.meta.noKeepAlive && item.name !== refreshRouteName)
  43. .flatMap((item) => item.name)
  44. }
  45. // 更新KeepAlive缓存页面
  46. watchEffect(() => {
  47. routerKey.value = handleActivePath(route, true)
  48. updateKeepAliveNameList()
  49. siteData.description = `${'Vue'} ${'Shop'} ${'Vite'}-${route.meta.title}简介、官网、首页、文档和下载 - 前端开发框架`
  50. })
  51. $sub('reload-router-view', (refreshRouteName: any = route.name) => {
  52. if (theme.value.showProgressBar) VabProgress.start()
  53. const cacheActivePath = routerKey.value
  54. routerKey.value = null
  55. updateKeepAliveNameList(refreshRouteName)
  56. nextTick(() => {
  57. routerKey.value = cacheActivePath
  58. updateKeepAliveNameList()
  59. })
  60. setTimeout(() => {
  61. if (theme.value.showProgressBar) VabProgress.done()
  62. }, 200)
  63. })
  64. </script>