| | |
| | | <template> |
| | | <section class="app-main"> |
| | | <router-view v-slot="{ Component, route }"> |
| | | <transition name="fade-transform" mode="out-in"> |
| | | <keep-alive :include="cachedViews"> |
| | | <component :is="Component" :key="route.path" /> |
| | | <!-- <transition>--> |
| | | <!-- :include="cachedViews" --> |
| | | <keep-alive > |
| | | <component :is="Component" :key="route.fullPath" /> |
| | | </keep-alive> |
| | | </transition> |
| | | <!-- </transition>--> |
| | | </router-view> |
| | | </section> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import {useRoute} from "vue-router"; |
| | | import {computed} from "vue"; |
| | | import {useTagsViewStore} from "@/store/modules/tagsView"; |
| | | |
| | | let store = useTagsViewStore() |
| | | <script setup lang="ts"> |
| | | import { computed, watch } from 'vue' |
| | | import { useRoute } from 'vue-router' |
| | | import { useTagsViewStore } from '@/store/modules/tagsView' |
| | | |
| | | const store = useTagsViewStore() |
| | | const route = useRoute() |
| | | store.addCachedView(route) |
| | | const cachedViews = computed(() => { |
| | | return store.cachedViews |
| | | }) |
| | | |
| | | watch( |
| | | () => route.name, |
| | | () => { |
| | | store.addCachedView(route) |
| | | }, |
| | | { immediate: true } |
| | | ) |
| | | |
| | | const cachedViews = computed(() => store.cachedViews) |
| | | </script> |
| | | |
| | | |
| | | <style lang="scss" scoped> |
| | | .app-main { |
| | | /* 50= navbar 50 */ |