构建Vue项目的侧边栏组件:Aside
在Vue项目中,侧边栏(Aside)是一个常见的组件,用于展示导航菜单。本文将详细介绍如何创建一个侧边栏组件,包括如何引入el-menu
组件、定义路由、传递props以及编写MenuTree
子组件等步骤。
1. 引入el-menu
组件
首先,在Aside.vue
中引入el-menu
组件,用于构建侧边栏的菜单结构。
2. 侧边栏Logo
在el-menu
组件内部,添加一个用于显示侧边栏Logo的<p>
标签。
3. 抽离MenuTree
组件
为了更灵活地管理菜单数据,我们抽离出一个MenuTree
组件,专门用于渲染菜单项和子菜单。
4. 定义路由
在router/index.js
文件中定义路由,并在对应的视图(view)页面中编写相应的内容。
5. Props传递
在Aside.vue
组件中,通过props向MenuTree
组件传递菜单数据(menuData
)和侧边栏收缩状态(isCollapse
)。
使用useRouter
获取路由信息
利用useRouter
钩子获取路由信息,并从router.options.routes[0].children
中提取出菜单数据,然后传递给MenuTree
组件。
6. MenuTree.vue
编写
在MenuTree.vue
组件中,我们使用v-for
指令遍历菜单数据,根据菜单项是否有子项来生成不同的菜单结构。
- 无子菜单 :使用
el-menu-item
组件,并显示图标和文字。 - 有子菜单 :使用
el-sub-menu
组件,并递归调用MenuTree
组件来生成子菜单。
7. 使用RouterView
展示路由后的页面
在App.vue
或Layout.vue
中使用RouterView
组件来展示路由对应的页面内容。
8. 侧边栏的缩放功能
侧边栏的缩放功能还未完全实现,但已在Header部分预留了按钮用于控制侧边栏的收缩状态。
完整代码示例
Aside.vue
vue
<template>
<el-menu :default-active="$route.path" router :collapse="isCollapse">
<p class="logo">{{ isCollapse ? 'W' : 'W陪诊' }}</p>
<menu-tree :menuData="menuData" :isCollapse="isCollapse" />
</el-menu>
</template>
<script setup>
import MenuTree from './components/MenuTree.vue'
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useMenuStore } from '@/stores'
const router = useRouter()
const menuData = router.options.routes[0].children
const menuStore = useMenuStore()
const isCollapse = computed(() => menuStore.menuIsCollapse)
</script>
<style scoped>
/* 样式代码 */
</style>
MenuTree.vue
vue
<template>
<div>
<template v-for="(item, index) in props.menuData">
<el-menu-item v-if="!item.children" :index="item.meta.path">
<el-icon><component :is="item.meta.icon"></component></el-icon>
<span>{{ isCollapse ? '' : item.meta.name }}</span>
</el-menu-item>
<el-sub-menu v-else :index="item.path">
<template #title>
<el-icon><component :is="item.meta.icon"></component></el-icon>
<span>{{ isCollapse ? '' : item.meta.name }}</span>
</template>
<menu-tree :menuData="item.children" :isCollapse="isCollapse" />
</el-sub-menu>
</template>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useMenuStore } from '@/stores'
const props = defineProps(['menuData', 'isCollapse'])
const router = useRouter()
const MenuStore = useMenuStore()
const handleClickMenu = (item) => {
MenuStore.setTagList(item.meta)
}
</script>
通过上述步骤,我们可以成功地创建一个功能完备的侧边栏组件,为Vue项目提供清晰的导航结构。