mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
34 lines
967 B
Vue
34 lines
967 B
Vue
<template>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition
|
|
:name="transitionPropName"
|
|
:mode="transitionMode"
|
|
:appear="transitionAppear"
|
|
>
|
|
<keep-alive include="layout">
|
|
<component :is="Component" :key="route" />
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
transitionPropName: {
|
|
type: String,
|
|
default: 'fade-transform',
|
|
},
|
|
transitionMode: {
|
|
type: String,
|
|
default: 'out-in',
|
|
},
|
|
transitionAppear: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
// 带过渡动画 `RouterView` 组件
|
|
// 如果子路由需要做动画切换，则需要此组件
|
|
// 为什么必须为 `vue` 文件，因为 `tsx` 文件在解析的时候会抛出警告不好看
|
|
// 只需要像使用 `RouterView` 组件时一样使用即可, 但是不能对于子路由生效, 所以需要在子路由显示的地方替换 `RouterView` 组件
|
|
</script>
|