八、vue3+ts项目框架搭建——右侧下部页面内容区域

内容区可直接放置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>