<template> <div class="about"> <v-header /> <v-sidebar /> <div class="content-box" :class="{ 'content-collapse': collapse }"> <v-tags /> <div class="content"> <router-view v-slot="{ Component }"> <transition name="move" mode="out-in"> <keep-alive :include="tagsList"> <component :is="Component" /> </keep-alive> </transition> </router-view> <!-- <el-backtop target=".content"></el-backtop> --> </div> </div> </div> </template> <script setup> import { computed } from 'vue'; import { useStore } from 'vuex'; import vHeader from '../../components/Header.vue'; import vSidebar from '../../components/LogisticsSidebar.vue'; import vTags from '../../components/Tags.vue'; const store = useStore(); const tagsList = computed(() => store.state.tagsList.map((item) => item.name)); const collapse = computed(() => store.state.collapse); // defineExpose 可以省略 defineExpose({ tagsList, collapse, }); </script>

这是一个 Vue.js 的单文件组件，包含一个模板和一个使用了 Vue 3 的新特性 `script setup` 的脚本部分。该组件引入了头部、侧边栏、标签等组件，并使用 Vuex 状态管理库来管理标签列表和折叠状态。在脚本部分，使用了 `computed` 函数来计算标签列表和折叠状态，然后通过 `defineExpose` 将它们暴露出去，以便在组件的父组件中使用。该组件还使用了 Vue 的动画系统，为组件切换添加了过渡效果。