jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(projects): 修复页面缓存

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

22
src/layouts/BasicLayout/components/GlobalContent/index.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
<router-view v-slot="{ Component, route }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component :is="Component" v-if="reload" :key="route.fullPath" />
</keep-alive>
</transition>
</router-view>
</n-layout-content>
</template>
<script lang="ts" setup>
import { NLayoutContent } from 'naive-ui';
import { useThemeStore } from '@/store';
import { useReloadInject } from '@/context';
import { cacheRoutes } from '@/router';
const theme = useThemeStore();
const { reload } = useReloadInject();
</script>
<style scoped></style>

3
src/layouts/BasicLayout/components/index.ts
View File

@ -1,7 +1,8 @@
import GlobalSider from './GlobalSider/index.vue';
import GlobalHeader from './GlobalHeader/index.vue';
import GlobalTab from './GlobalTab/index.vue';
import GlobalContent from './GlobalContent/index.vue';
import GlobalFooter from './GlobalFooter/index.vue';
import SettingDrawer from './SettingDrawer/index.vue';
export { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer };
export { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer };

30
src/layouts/BasicLayout/index.vue
View File

@ -16,14 +16,7 @@
>
<global-header v-if="!isHorizontalMix" :z-index="2" />
<global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
<n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />
</keep-alive>
<component :is="Component" v-if="!routeProps.keepAlive && reload" :key="routeProps.name" />
</router-view>
</n-layout-content>
<global-content />
<global-footer />
</div>
</n-scrollbar>
@ -33,17 +26,17 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { NLayout, NScrollbar } from 'naive-ui';
import { useThemeStore } from '@/store';
import { useReloadInject } from '@/context';
import { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer } from './components';
import { useRouteProps, useScrollBehavior } from '../composables';
import { useRouteProps, useScrollBehavior } from '@/hooks';
import { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer } from './components';
const route = useRoute();
const theme = useThemeStore();
const { scrollbar } = useScrollBehavior();
const { scrollbar, resetScrollBehavior } = useScrollBehavior();
const routeProps = useRouteProps();
const { reload } = useReloadInject();
const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
const headerAndMultiTabHeight = computed(() => {
@ -53,6 +46,13 @@ const headerAndMultiTabHeight = computed(() => {
} = theme;
return `${hHeight + mHeight}px`;
});
watch(
() => route.name,
() => {
resetScrollBehavior();
}
);
</script>
<style scoped>
:deep(.n-scrollbar-rail) {

31
src/layouts/BlankLayout/index.vue
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>

43
src/layouts/composables/index.ts
View File

@ -1,43 +0,0 @@
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
export function useRouteProps() {
const route = useRoute();
const props = computed(() => {
/** 路由名称 */
const name = route.name as string;
/** 混存页面 */
const keepAlive = Boolean(route.meta?.keepAlive);
/** 视高100% */
const fullPage = Boolean(route.meta?.fullPage);
return {
name,
keepAlive,
fullPage
};
});
return props;
}
/** 路由切换，重置滚动行为 */
export function useScrollBehavior() {
const scrollbar = ref<HTMLElement | null>(null);
const route = useRoute();
function resetScrollBehavior() {
scrollbar.value?.scrollTo({ left: 0, top: 0 });
}
watch(
() => route.name,
() => {
resetScrollBehavior();
}
);
return {
scrollbar
};
}