<template>
<div>
<van-sidebar v-model="active" :items="sidebarItems" />
<!-- 这里放页面的其他内容 -->
</div>
</template>
<script>
export default {
data() {
return {
active: 0, // 当前选中的导航项索引
sidebarItems: [
{ text: '导航项1' },
{ text: '导航项2' },
{ text: '导航项3' },
// 添加更多导航项...
],
};
},
};
</script>
在这个示例中，<van-sidebar> 组件用于创建侧边导航栏，通过 v-model 双向绑定 active 属性，指定当前选中的导航项索引。通过 :items 属性传入导航项数组，每个导航项是一个对象，包含了导航项的文本等信息。
你可以根据项目的需求进行定制，例如在导航项中加入图标、设置样式等。在页面的其他内容放在 <div> 标签内，与侧边导航栏共同构成页面布局。
确保已正确安装和引入 Vant，以及按照文档进行配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5698/Vant