可通过设置属性，实现带过渡效果的页面切换，不设置直接使用时，与<router-view/>标签相同。

slide-fade过渡效果

<template>  
    <my-router-view class="page"  
                    :set-key="true"  
                    @before-leave="styleFlag=true"  
                    @after-enter="styleFlag=false"  
                    transition-name="slide-fade"/>
</template>

<script setup>  
import {ref} from 'vue'  
 
const styleFlag = ref(false)  
</script>

属性

/**  
* transition的name，默认没有过渡效果  
* 可选值：1.slide-fade  
*/  
transitionName: {  
    type: String,  
    default: ''  
}

/**  
* 设置为true时，复用的组件会强制刷新，默认为false  
*/  
setKey: {  
    type: Boolean,  
    default: false  
}

事件

/**  
* 前一个页面开始离开  
* 回调参数：无  
*/  
'beforeLeave'

/**  
* 后一个页面结束进入  
* 回调参数：无  
*/  
'afterEnter'

源代码

github.com/fcfcfc/tool…
组件可直接使用，或根据自己的需求自行修改。如有任何问题或新的需求，请及时联系我，看到后会第一时间回复。就这！