vue2+el-menu实现路由跳转及当前项的设置
2017-11-06 17:54
447 查看
<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为当前项。
相关文章推荐
- vue2+el-menu实现路由跳转及当前项的设置方法实例
- AngularJS实现单一页面内设置跳转路由的方法
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- angular设置路由实现无刷新跳转
- Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
- 通过SlidingMenu+Fragment实现当前最流行的侧滑
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- C#笔记1——如何在登录界面设置主界面的ToolStripMenuItem的enabled属性,实现不同用户进入不同模块
- 怎么在当前的view上获取所在的控制器(UIViewController),实现跳转
- asp.net不用设置iis实现url重写 类似伪静态路由
- angular和路由实现页面跳转/姓名筛选/年龄区间查找/单/批量删除
- OnActionExecuting 中设置跳转指定网址或路由
- 判断当前的网络状态并跳转到系统设置
- 通过SlidingMenu+Fragment实现当前最流行的侧滑
- history.pushState()实现不跳转,改变路由异步刷新
- J2ME技术实现:从当前屏幕跳转至其…
- vue当前路由跳转初步研究
- JS路由跳转的简单实现代码
- 黄聪:PHP如何实现延迟一定时间后自动刷新当前页面、自动跳转header("refresh:1;url={$url}");
- C++ 设置和获取当前工作路径的实现代码