陈文彬
2020-10-08 faf3f4602ecf4b16ff57994668edc8433a43945d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { computed, defineComponent, unref, Transition, KeepAlive, toRaw } from 'vue';
 
import { appStore } from '/@/store/modules/app';
 
import { useTransition } from './useTransition';
 
import { RouterView, RouteLocation } from 'vue-router';
import { tabStore } from '/@/store/modules/tab';
 
// import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'PageLayout',
  setup() {
    // const { currentRoute } = useRouter();
    const getProjectConfigRef = computed(() => {
      return appStore.getProjectConfig;
    });
    const { openPageLoading } = unref(getProjectConfigRef);
 
    let on = {};
    if (openPageLoading) {
      const { on: transitionOn } = useTransition();
      on = transitionOn;
    }
    return () => {
      const {
        routerTransition,
        openRouterTransition,
        openKeepAlive,
        multiTabsSetting: { show, max },
      } = unref(getProjectConfigRef);
 
      const openCache = openKeepAlive && show;
      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
      return [
        <RouterView>
          {{
            default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
              const Content = openCache ? (
                <KeepAlive max={max} include={cacheTabs}>
                  <Component {...route.params} />
                </KeepAlive>
              ) : (
                <Component {...route.params} />
              );
              return openRouterTransition ? (
                <Transition
                  {...on}
                  name={route.meta.transitionName || routerTransition}
                  mode="out-in"
                >
                  {() => Content}
                </Transition>
              ) : (
                Content
              );
            },
          }}
        </RouterView>,
      ];
    };
  },
});