内容区可直接放置router-view占位子路由展示位置
- 所有内容区路由是layout的子路由，子路由需要在父路由中使用router-view占位才能显示
-
app.vue是所有其他组件的父view/router，router里的父子关系通过来展现。所以在app.vue也要router-view标签
文章来源地址https://www.toymoban.com/news/detail-828718.html
也可拆成组件单独添加切换动画
<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>
文章来源：https://www.toymoban.com/news/detail-828718.html
到了这里，关于八、右侧下部页面内容区域的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
