布局

app 目录是整个框架的核心部分，index.vue 为主要入口文件，components 目录包含导航、侧边栏、面包屑、标签栏以及内容等。

对应目录

@/app

header 顶部导航

header 集成了面包屑、刷新按钮、用户信息、偏好设置以及侧边栏的 收缩与展开 操作按钮等。

对应目录

@/app/components/header

main 主体内容

对应目录

@/app/components/main

路由视图和路由切换动画。

<template>
  <div class="app-main">
    <router-view :key="key" v-slot="{ Component }">
      <transition appear name="page-slide" mode="out-in">
        <keep-alive :include="cachedTags">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

router-view 路由视图

在 router-view 加上唯一的一个 key，来保证路由切换时都会重新渲染触发钩子。

<template>
  <div class="app-main">
    <router-view :key="key" v-slot="{ Component }">...</router-view>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';

// 路由
const router = useRouter();

// 设置 router-view key
const key = computed(() => router.currentRoute.value.fullPath + Math.random());
</script>

自适应

vusui-admin-template 已设置了基础的响应式方案，如果需求比较复杂的请自行修改。