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

这篇文章主要为大家详细介绍了vue2+el-menu实现路由跳转及当前项的设置方法实例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

Vue.js 是什么

 

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标签中绑定  :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

 

总结

 

以上所述是小编给大家介绍的vue2+el-menu实现路由跳转及当前项的设置方法实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/4351-0.html

注：关于vue2+el-menu实现路由跳转及当前项的设置方法实例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js