构建Vue项目的侧边栏组件:Aside

构建Vue项目的侧边栏组件:Aside

在Vue项目中,侧边栏(Aside)是一个常见的组件,用于展示导航菜单。本文将详细介绍如何创建一个侧边栏组件,包括如何引入el-menu组件、定义路由、传递props以及编写MenuTree子组件等步骤。

1. 引入el-menu组件

首先,在Aside.vue中引入el-menu组件,用于构建侧边栏的菜单结构。

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组件。

MenuTree.vue组件中,我们使用v-for指令遍历菜单数据,根据菜单项是否有子项来生成不同的菜单结构。

  • 无子菜单 :使用el-menu-item组件,并显示图标和文字。
  • 有子菜单 :使用el-sub-menu组件,并递归调用MenuTree组件来生成子菜单。

7. 使用RouterView展示路由后的页面

App.vueLayout.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项目提供清晰的导航结构。

相关推荐
昔人'36 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者7 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge7 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴7 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生8 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟8 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1239 小时前
CSS易忘属性
前端·css