vue3使用transition全局过渡组件

刚开始使用transition直接包裹router-view页面报出警告，在 Vue Router 4 中，<router-view> 不能直接放置在 <transition> 或 <keep-alive> 内部。相反，您需要使用插槽属性（slot props）来实现相同的效果。根据给出的警告信息，您需要将 <router-view> 替换为以下代码，并通过解构值将 Component 提取出来。然后，使用 <component> 包装 Component 组件，并包裹在 <transition> 中，然后设置动画过渡发现动画显示有问题，翻看了官网一直看到最后面才知道要使用过渡效果需要在transition组件里面添加一个mode="out-in"