fix(projects): 修复页面缓存

This commit is contained in:
Soybean
2021-09-22 16:56:25 +08:00
parent 4f05095336
commit fa0a907941
21 changed files with 332 additions and 136 deletions

View File

@ -1,21 +1,38 @@
<template>
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
</keep-alive>
<component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
<router-view v-slot="{ Component, route: itemRoute }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component :is="Component" v-if="reload" :key="itemRoute.fullPath" />
</keep-alive>
</transition>
</router-view>
</div>
</n-scrollbar>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';
import { NScrollbar } from 'naive-ui';
import { useRouteProps, useScrollBehavior } from '../composables';
import { useRouteProps, useScrollBehavior } from '@/hooks';
import { useThemeStore } from '@/store';
import { useReloadInject } from '@/context';
import { cacheRoutes } from '@/router';
const { scrollbar } = useScrollBehavior();
const theme = useThemeStore();
const { reload } = useReloadInject();
const route = useRoute();
const { scrollbar, resetScrollBehavior } = useScrollBehavior();
const routeProps = useRouteProps();
watch(
() => route.name,
() => {
resetScrollBehavior();
}
);
</script>
<style scoped></style>