vue中在一个div中一半用el-menu实现侧边栏,另一半为点击侧边栏跳转对应页面,不使用router-view方式侧边栏一直显示
时间: 2024-04-09 21:33:22 浏览: 137
基于vue.js实现侧边菜单栏
如果你希望在一个div中一半使用el-menu实现侧边栏,另一半为点击侧边栏跳转对应页面,并且侧边栏一直显示,而不使用router-view方式,可以按照以下步骤进行操作:
1. 在Vue组件中定义一个data属性,例如`selectedMenuItem`,用于记录当前选中的菜单项。
2. 在模板中使用el-menu组件来创建侧边栏,并绑定`selected`属性为`selectedMenuItem`,以实现菜单项的选中效果。例如:
```html
<div class="container">
<div class="sidebar">
<el-menu :selected="selectedMenuItem" @select="handleMenuSelect">
<el-menu-item index="page1">页面1</el-menu-item>
<el-menu-item index="page2">页面2</el-menu-item>
</el-menu>
</div>
<div class="content">
<!-- 根据selectedMenuItem的值来显示对应的内容 -->
<div v-if="selectedMenuItem === 'page1'">页面1的内容</div>
<div v-else-if="selectedMenuItem === 'page2'">页面2的内容</div>
</div>
</div>
```
3. 在Vue组件中定义一个方法`handleMenuSelect`,用于处理菜单项的选择事件。该方法将选中的菜单项赋值给`selectedMenuItem`。例如:
```javascript
methods: {
handleMenuSelect(index) {
this.selectedMenuItem = index;
}
}
```
4. 在样式中设置`.sidebar`的宽度为一半,并将`.content`的宽度设置为另一半,以实现侧边栏和内容区域的分割。
这样,当点击侧边栏的菜单项时,会更新`selectedMenuItem`的值,从而显示对应的内容区域。而侧边栏会一直显示在页面上。
阅读全文