element---------------el-menu组件_实现路由跳转及当前项的设置
2023-09-11 14:17:22 时间
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>用户信息</span>
</template>
<el-menu-item-group>
<el-menu-item index="/user/account">账号信息</el-menu-item>
<el-menu-item index="/user/password">修改密码</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>公司信息</span>
</template>
<el-menu-item-group>
<el-menu-item index="/company/userManager">用户管理</el-menu-item>
<el-menu-item index="/company/editUser">添加/编辑用户</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。
相关文章
- 关于Laravel 7 的简单隐式路由模型绑定
- H5单页面架构:自定义路由 + requirejs + zepto + underscore
- ARouter 路由 组件 跳转 MD
- IS-IS详解(十四)——IS-IS路由开销计算与外部路由引入
- reactjs通过lazy函数配合import函数动态加载路由组件
- ASP.NET Core路由中间件[3]: 终结点(Endpoint)
- 73. 使用自定义 Query 实现 SAP UI5 页面路由的书签功能
- vue路由报错export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘
- Python Flask框架学习05:Flask 路由
- 关于IP协议与路由协议的复习
- 【Android Gradle 插件】组件化中的 Gradle 构建脚本实现 ④ ( 使用路由实现组件间通信 | 引入 ARoute 框架 | Gradle 构建脚本优化问题 )
- 正向代理,反向代理,路由(转)
- 【云原生之Docker实战】使用Docker部署ROS软路由系统
- Flutter 耗时监控 | 路由名为空原因分析
- PVE虚拟化平台之安装iStoreOS软路由系统