当前位置：首页 > 资讯 > 技术文档

vue2+el-menu实现路由跳转及当前项的设置方法实例

时间：2021-03-24 20:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：vue2+el-menu实现路由跳转及当前项的设置方法实例

[b]Vue.js 是什么[/b] Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。好了，下面通过本文给大家介绍vue2+el-menu实现路由跳转及当前项的设置方法，具体内容如下所示：

<span style="font-size:24px;" deep="5"><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></span>

1.要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项，在el-menu标签中绑定 :[code]default-active="$route.path"[/code],注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。 [b]总结[/b] 以上所述是小编给大家介绍的vue2+el-menu实现路由跳转及当前项的设置方法实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：Vue resource中的GET与POST请求的实例代码
下一篇：详解vuejs几种不同组件（页面）间传值的方式

资讯排行榜
更多>>