vue+element-ui 实现多级侧边栏导航

最新推荐文章于 2025-04-22 23:50:29 发布

原创最新推荐文章于 2025-04-22 23:50:29 发布

· 6.4k 阅读

6 ·

版权

文章标签：

#element-ui

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何结合Vue.js和Element-UI库来实现一个多级的侧边栏导航菜单。通过封装asideBarItem组件和配置路由，实现了动态展示各级导航项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@效果图
在这里插入图片描述

导航菜单

<!--导航菜单-->
<el-menu
	router
	:default-active="$route.path"
	v-show="!collapsed"
	unique-opened>
	<!-- 左侧导航栏抽取循环部分 将路由列表传给子组件-->
	<asideBarItem
		v-for="(router,index) in $router.options.routes"
		:router="router"
		:index="index"
		:key="index"
		v-if="!router.hidden"
	>
	</asideBarItem>
</el-menu>

asideBarItem组件封装

<template>
  <div class="asideBarItem-container">
      <el-submenu :index="index+''" v-if="!router.hidden&&router.children&&router.children.length>0">
      	<span slot="title"><i :class="router.iconCls"></i>{{router.name}}</span>
        <asideBarItem v-for="(child, childKey) in router.children" :key="child.path" :router="child" :index="index+'-'+childKey"></asideBarItem>
      </el-submenu>
      <el-menu-item
        v-if="!router.hidden&&(!router.children||router.children.length==0)"
        :key="router.path"
        :index="router.path">
        <span slot="title"><i :class="router.iconCls"></i>{{router.name}}</span>
      </el-menu-item>
  </div>
</template>

<script>
  export default {
    name: 'asideBarItem',
    props: [
      "router",
      "index"
    ],
    components: {},
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {}
  }
</script>

<style lang="scss" scoped>
  .asideBarItem-container {
  }
</style>

路由

routes: [
    {
        path: '/',
        component: List,
        name: '列表',
        //iconCls: 'el-icon-list',//图标样式class
        children: [
            { path: '/room', component:Room, name: '客房' ,children:[{
            		path: '/test', component:Test,  name: '登录'
           		}]
            },
            { path: '/spring', component: Spring,  name: '温泉' },
            { path: '/foodie', component: Foodie, name: '餐饮' }
        ]
    }，
    {
        path: '/login',
        component: Login,
        name: 'Login',
        hidden: true
    }
]