|
@@ -15,36 +15,38 @@ const transition = computed(() => {
|
|
|
|
|
|
<template>
|
|
|
<section class="app-main">
|
|
|
- <router-view>
|
|
|
- <template #default="{ Component, route }">
|
|
|
- <transition
|
|
|
- :name="
|
|
|
- transition(route) && route.meta.transition.enterTransition
|
|
|
- ? 'pure-classes-transition'
|
|
|
- : (transition(route) && route.meta.transition.name) ||
|
|
|
- 'fade-transform'
|
|
|
- "
|
|
|
- :enter-active-class="
|
|
|
- transition(route) &&
|
|
|
- `animate__animated ${route.meta.transition.enterTransition}`
|
|
|
- "
|
|
|
- :leave-active-class="
|
|
|
- transition(route) &&
|
|
|
- `animate__animated ${route.meta.transition.leaveTransition}`
|
|
|
- "
|
|
|
- mode="out-in"
|
|
|
- appear
|
|
|
- >
|
|
|
- <keep-alive
|
|
|
- v-if="keepAlive"
|
|
|
- :include="usePermissionStoreHook().cachePageList"
|
|
|
+ <el-scrollbar>
|
|
|
+ <router-view>
|
|
|
+ <template #default="{ Component, route }">
|
|
|
+ <transition
|
|
|
+ :name="
|
|
|
+ transition(route) && route.meta.transition.enterTransition
|
|
|
+ ? 'pure-classes-transition'
|
|
|
+ : (transition(route) && route.meta.transition.name) ||
|
|
|
+ 'fade-transform'
|
|
|
+ "
|
|
|
+ :enter-active-class="
|
|
|
+ transition(route) &&
|
|
|
+ `animate__animated ${route.meta.transition.enterTransition}`
|
|
|
+ "
|
|
|
+ :leave-active-class="
|
|
|
+ transition(route) &&
|
|
|
+ `animate__animated ${route.meta.transition.leaveTransition}`
|
|
|
+ "
|
|
|
+ mode="out-in"
|
|
|
+ appear
|
|
|
>
|
|
|
- <component :is="Component" :key="route.fullPath" />
|
|
|
- </keep-alive>
|
|
|
- <component v-else :is="Component" :key="route.fullPath" />
|
|
|
- </transition>
|
|
|
- </template>
|
|
|
- </router-view>
|
|
|
+ <keep-alive
|
|
|
+ v-if="keepAlive"
|
|
|
+ :include="usePermissionStoreHook().cachePageList"
|
|
|
+ >
|
|
|
+ <component :is="Component" :key="route.fullPath" />
|
|
|
+ </keep-alive>
|
|
|
+ <component v-else :is="Component" :key="route.fullPath" />
|
|
|
+ </transition>
|
|
|
+ </template>
|
|
|
+ </router-view>
|
|
|
+ </el-scrollbar>
|
|
|
</section>
|
|
|
</template>
|
|
|
|