1. 在el-menu加上router 2. index必须绑定路由的path,参考上面的例子,'/'不能少 3. default-active设为当前路由(this.$route.path),这样在路由变化的时候,对应的menu-item才会高亮。
<el-menu-item index="/POSAccountManage"> <router-link to="/POSAccountManage" tag="span" class="span">门店商户账号</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="1-1"> <template slot="title">商家店铺商品</template> <el-menu-item index="/...
在上面的代码中,el-menu组件定义了一个水平的导航菜单。每个el-menu-item组件对应一个导航项,可以通过index属性来定义导航项的唯一标识。el-submenu组件用于定义子菜单,可以通过slot插槽来设置子菜单的标题和内容。@select事件用于监听导航菜单的选中事件。 创建第一个页面 设计一个简单的登录页面 本节将设计一个简单...
el-submenu> </el-menu> </template> export default { name: "Menu", data() { return { // 在 el-menu 中绑定 :collapse="iscollapse" ,预设值为 false,展开菜单 iscollapse: false, }; }, mounted() { // 用事件总线绑定事件,兄弟组件触发后,就传递参数true/false,控制是否展开 this.$bus.$...
</el-container> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 说明:el-container标签是整个布局容器,el-header标签是容器上方(含“管理系统”的上方部分),el-aside标签是旁边的菜单列表,el-main标签是右边白色区域(后面会设置它显示后端传过来的数据)。
<el-menu class="el-menu-vertical" mode="vertical" menu-trigger="click" :router="true" :unique-opened="true" :default-active="$route.path" :collapse="sidebar.opened"> <el-submenu index="299"> <template slot="title"> xxaa </template> <el-menu-item index="/page1">edit</el-menu-...
return h('el-menu-item', { props: { index: key, route: item[this.props.route] }, key: key }, this.createTitle(h, item)) }, createSubmenu(h, item) { const key = (item[this.props.id] || '').toString() return h('el-submenu', { ...
<el-menu class="el-menu-vertical" mode="vertical" menu-trigger="click" :router="true" :unique-opened="true" :default-active="$route.path" :collapse="sidebar.opened"> <el-submenu index="299"> <template slot="title"> xxaa </template> <el-menu-item index="/page1">edit</el-menu-...
menu-itemindex="3-1">服务一</el-menu-item><el-menu-itemindex="3-2">服务二</el-menu-item></el-submenu><el-menu-itemindex="4">联系我们</el-menu-item></el-menu></template>exportdefault{methods:{handleSelect(index){console.log('选中了菜单项:',index);}}} 1. 2. 3. 4. 5. ...
在上面的示例中,我们使用el-menu和el-submenu组件来创建菜单,然后使用el-menu-item组件来创建子菜单项。在每个子菜单项上,我们监听了@click事件,并通过调用navigateTo方法来导航到目标路由,并传递了路由参数。在方法中,我们使用this.$router.push来导航到目标路由,并在params属性中传递路由参数。 请注意,上述示例假定...