vant 导航栏,vant 侧边栏,vant弹出框底部位置定位,vant菜单,vant 地图,vant 图标
Vant3 Sidebar 侧边导航是一个基于 Vant3 UI 组件库实现的可折叠的边栏菜单，通常用于网站或应用程序的导航。

该组件可以支持多级嵌套的子菜单，并且在菜单项被选中时可以高亮显示。用户可以通过单击菜单项或者点击折叠图标来展开或收起子菜单。

以下是一个示例代码，展示如何使用 Vant3 Sidebar 侧边导航组件：


<template>
<van-sidebar v-model="activeIndex" :value-key="'title'">
<van-sidebar-item
v-for="(item, index) in menuList"
:key="index"
:title="item.name"
:icon="item.icon"
>
<van-sidebar-item
v-for="(subItem, subIndex) in item.children"
:key="subIndex"
:title="subItem.name"
:to="subItem.path"
/>
</van-sidebar-item>
</van-sidebar>
</template>

<script>
export default {
data() {
return {
menuList: [
{
name: '首页',
icon: 'home-o',
children: [
{
name: '推荐',
path: '/'
},
{
name: '热门',
path: '/hot'
}
]
},
{
name: '分类',
icon: 'apps-o',
children: [
{
name: '电影',
path: '/movie'
},
{
name: '音乐',
path: '/music'
}
]
}
],
activeIndex: '/'
};
}
};
</script>


在这个示例中，van-sidebar 组件被用来创建一个边栏菜单。菜单项通过循环列表 menuList 渲染，并且使用 van-sidebar-item 组件来定义每一个菜单项。其中，子菜单也通过 van-sidebar-item 组件来定义。

最后，activeIndex 属性绑定到了当前选中的菜单项的路径。这个属性可以控制菜单项的高亮显示。