|
@@ -2,11 +2,7 @@
|
|
|
<div class="app-main" :class="{ 'show-tag-view': settings.showTagsView }">
|
|
|
<router-view v-slot="{ Component }">
|
|
|
<!--has transition Judging by settings.mainNeedAnimation-->
|
|
|
- <transition
|
|
|
- v-if="settings.mainNeedAnimation"
|
|
|
- name="fade-transform"
|
|
|
- mode="out-in"
|
|
|
- >
|
|
|
+ <transition v-if="settings.mainNeedAnimation" name="fade-transform" mode="out-in">
|
|
|
<keep-alive :include="cachedViews">
|
|
|
<component :is="Component" :key="key" />
|
|
|
</keep-alive>
|
|
@@ -20,39 +16,39 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ObjTy } from '~/common'
|
|
|
-import { useAppStore } from '@/store/app'
|
|
|
+import { ObjTy } from "~/common";
|
|
|
+import { useAppStore } from "@/store/app";
|
|
|
|
|
|
-const route = useRoute()
|
|
|
+const route = useRoute();
|
|
|
const settings = computed(() => {
|
|
|
- return appStore.settings
|
|
|
-})
|
|
|
+ return appStore.settings;
|
|
|
+});
|
|
|
|
|
|
const key = computed(() =>
|
|
|
- route.matched[0].name === 'RealTime' ? route.matched[2].path : route.path
|
|
|
-)
|
|
|
+ route.matched[0].name === "RealTime" ? route.matched[2]?.path : route.path
|
|
|
+);
|
|
|
|
|
|
const cachedViews = computed(() => {
|
|
|
- return appStore.cachedViews
|
|
|
-})
|
|
|
+ return appStore.cachedViews;
|
|
|
+});
|
|
|
|
|
|
/*listen the component name changing, then to keep-alive the page*/
|
|
|
// cachePage: is true, keep-alive this Page
|
|
|
// leaveRmCachePage: is true, keep-alive remote when page leave
|
|
|
-let oldRoute: ObjTy = {}
|
|
|
-let deepOldRouter: ObjTy | null = null
|
|
|
+let oldRoute: ObjTy = {};
|
|
|
+let deepOldRouter: ObjTy | null = null;
|
|
|
|
|
|
-const appStore = useAppStore()
|
|
|
-const removeDeepChildren = deepOldRouter => {
|
|
|
- deepOldRouter.children?.forEach(fItem => {
|
|
|
- appStore.M_DEL_CACHED_VIEW_DEEP(fItem.name)
|
|
|
- })
|
|
|
-}
|
|
|
+const appStore = useAppStore();
|
|
|
+const removeDeepChildren = (deepOldRouter) => {
|
|
|
+ deepOldRouter.children?.forEach((fItem) => {
|
|
|
+ appStore.M_DEL_CACHED_VIEW_DEEP(fItem.name);
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
watch(
|
|
|
() => route.name,
|
|
|
() => {
|
|
|
- const routerLevel = route.matched.length
|
|
|
+ const routerLevel = route.matched.length;
|
|
|
//二级路由处理
|
|
|
if (routerLevel === 2) {
|
|
|
if (deepOldRouter?.name) {
|
|
@@ -60,30 +56,30 @@ watch(
|
|
|
deepOldRouter.meta?.leaveRmCachePage &&
|
|
|
deepOldRouter.meta?.cachePage
|
|
|
) {
|
|
|
- appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
|
|
|
+ appStore.M_DEL_CACHED_VIEW(deepOldRouter.name);
|
|
|
//remove the deepOldRouter‘s children component
|
|
|
- removeDeepChildren(deepOldRouter)
|
|
|
+ removeDeepChildren(deepOldRouter);
|
|
|
}
|
|
|
} else {
|
|
|
if (oldRoute?.name) {
|
|
|
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
|
|
|
- appStore.M_DEL_CACHED_VIEW(oldRoute.name)
|
|
|
+ appStore.M_DEL_CACHED_VIEW(oldRoute.name);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (route.name) {
|
|
|
if (route.meta?.cachePage) {
|
|
|
- appStore.M_ADD_CACHED_VIEW(route.name)
|
|
|
+ appStore.M_ADD_CACHED_VIEW(route.name);
|
|
|
}
|
|
|
}
|
|
|
- deepOldRouter = null
|
|
|
+ deepOldRouter = null;
|
|
|
}
|
|
|
|
|
|
//三级路由处理
|
|
|
if (routerLevel === 3) {
|
|
|
//三级时存储当前路由对象的上一级
|
|
|
- const parentRoute = route.matched[1]
|
|
|
+ const parentRoute = route.matched[1];
|
|
|
//deepOldRouter不为空,且deepOldRouter不是当前路由的父对象,则需要清除deepOldRouter缓存
|
|
|
//一般为三级路由跳转三级路由的情况
|
|
|
if (deepOldRouter?.name && deepOldRouter.name !== parentRoute.name) {
|
|
@@ -91,37 +87,37 @@ watch(
|
|
|
deepOldRouter.meta?.leaveRmCachePage &&
|
|
|
deepOldRouter.meta?.cachePage
|
|
|
) {
|
|
|
- appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
|
|
|
+ appStore.M_DEL_CACHED_VIEW(deepOldRouter.name);
|
|
|
//remove the deepOldRouter‘s children component
|
|
|
- removeDeepChildren(deepOldRouter)
|
|
|
+ removeDeepChildren(deepOldRouter);
|
|
|
}
|
|
|
} else {
|
|
|
//否则走正常两级路由处理流程
|
|
|
if (oldRoute?.name) {
|
|
|
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
|
|
|
- appStore.M_DEL_CACHED_VIEW_DEEP(oldRoute.name)
|
|
|
+ appStore.M_DEL_CACHED_VIEW_DEEP(oldRoute.name);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//取的是第二级的name
|
|
|
if (parentRoute.name && parentRoute.meta?.cachePage) {
|
|
|
- deepOldRouter = parentRoute
|
|
|
- appStore.M_ADD_CACHED_VIEW(deepOldRouter.name)
|
|
|
+ deepOldRouter = parentRoute;
|
|
|
+ appStore.M_ADD_CACHED_VIEW(deepOldRouter.name);
|
|
|
if (route.name) {
|
|
|
if (route.meta?.cachePage) {
|
|
|
//和第三级的name进行缓存
|
|
|
- appStore.M_ADD_CACHED_VIEW_DEEP(route.name)
|
|
|
+ appStore.M_ADD_CACHED_VIEW_DEEP(route.name);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
oldRoute = JSON.parse(
|
|
|
JSON.stringify({ name: route.name, meta: route.meta })
|
|
|
- )
|
|
|
+ );
|
|
|
},
|
|
|
{ immediate: true }
|
|
|
-)
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|