vue3 侧边栏 多级
时间: 2023-11-19 08:06:20 浏览: 33
在Vue3中,可以通过嵌套多个组件来实现多级侧边栏。具体实现思路如下:
1. 创建一个侧边栏组件Sidebar,该组件包含一个菜单列表,每个菜单项都可以展开或折叠子菜单。
2. 在Sidebar组件中,使用递归组件的方式来嵌套子菜单,即在菜单项中再次引用Sidebar组件。
3. 在每个菜单项中添加一个路由链接,用于跳转到对应的页面。
4. 在路由配置中,为每个页面添加一个对应的路由路径和组件。
5. 在App.vue中,将Sidebar组件和路由视图组件嵌套在一起,以实现侧边栏和页面的联动。
下面是一个示例代码,实现了一个两级侧边栏:
```html
<template>
<div class="app">
<sidebar :menus="menus"></sidebar>
<router-view></router-view>
</div>
</template>
<script>
import Sidebar from './components/Sidebar.vue'
export default {
name: 'App',
components: {
Sidebar
},
data() {
return {
menus: [
{
name: 'Dashboard',
icon: 'el-icon-s-home',
path: '/',
children: []
},
{
name: 'Products',
icon: 'el-icon-s-goods',
path: '/products',
children: [
{
name: 'List',
path: '/products/list',
children: []
},
{
name: 'Add',
path: '/products/add',
children: []
}
]
}
]
}
}
}
</script>
```
在上面的代码中,Sidebar组件接收一个menus属性,该属性是一个菜单列表,每个菜单项包含name、icon、path和children四个属性。其中,name表示菜单名称,icon表示菜单图标,path表示菜单链接,children表示子菜单列表。
下面是Sidebar组件的代码:
```html
<template>
<div class="sidebar">
<ul>
<li v-for="menu in menus" :key="menu.path">
<router-link :to="menu.path">
<i :class="menu.icon"></i>
<span>{{ menu.name }}</span>
</router-link>
<sidebar v-if="menu.children.length" :menus="menu.children"></sidebar>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Sidebar',
props: {
menus: {
type: Array,
default: () => []
}
}
}
</script>
```
在上面的代码中,使用v-for指令遍历menus数组,生成菜单列表。如果当前菜单项有子菜单,就递归引用Sidebar组件来生成子菜单。