内容区可直接放置router-view占位子路由展示位置 所有内容区路由是layout的子路由,子路由需要在父路由中使用router-view占位才能显示app.vue是所有其他组件的父view/router,router里的父子关系通过来展现。所以在app.vue也要router-view标签 也可拆成组件单独添加切换动画 <template> <!-- 路由组件出口的位置 --> <router-view v-slot="{ Component }"> <transition name="fade"> <!-- 渲染layout一级路由的子路由 --> <component :is="Component" /> </transition> </router-view> </template> <script setup lang="ts"></script> <style lang="scss" scoped> .fade-enter-from { opacity: 0; } .fade-enter-active { transition: all 0.3s; } .fade-enter-to { opacity: 1; } </style>