Vite2 + Vue3 + TS + ElementPlus 完善 Aside 菜单组件

在上一章中，我们搭建了后台管理系统的基础布局和项目结构。这一章，我们将重点完善基础布局组件，从 Aside 菜单组件开始。

Aside 菜单组件

Aside 菜单组件是后台管理系统中重要的导航栏，用于展示系统功能模块和快速跳转到不同页面。完善 Aside 菜单组件需要考虑以下几个方面：

1. 动态路由

Aside 菜单组件需要与路由系统结合，实现点击菜单项时动态加载对应页面的功能。我们可以使用 Vue Router 的 <router-link> 组件来实现这一需求。

2. 响应式布局

Aside 菜单组件需要适应不同屏幕尺寸，在较小的屏幕上隐藏或折叠。我们可以使用 ElementPlus 的 el-aside 组件和 v-if 指令来实现响应式布局。

3. keep-alive

为了优化用户体验，我们可以使用 Vue Router 的 keep-alive 功能，缓存已经加载过的页面组件，避免重复加载和渲染。

具体实现

<template>
  <el-aside v-if="showAside" :width="asideWidth">
    <el-menu :default-active="activePath">
      <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const asideWidth = ref('200px')
    const showAside = ref(true)

    // 响应式布局，当屏幕宽度小于 992px 时隐藏 Aside 菜单
    const isMobile = computed(() => window.innerWidth < 992)
    watch(isMobile, (val) => {
      if (val) {
        asideWidth.value = '0'
        showAside.value = false
      } else {
        asideWidth.value = '200px'
        showAside.value = true
      }
    })

    // 监听路由变化，更新激活的菜单项
    watch(() => route.path, (path) => {
      activePath.value = path
    }, { immediate: true })

    return {
      asideWidth,
      showAside,
      activePath: computed(() => route.path),
      menuList: computed(() => router.getRoutes().filter((route) => route.meta && route.meta.aside)),
    }
  },
}
</script>

通过以上实现，我们完善了 Aside 菜单组件，使其具备动态路由、响应式布局和 keep-alive 功能，为后台管理系统的导航和交互提供了良好的基础。