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

 更新时间:2017年11月07日 08:35:03   作者:iulyf  
这篇文章主要介绍了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实现路由跳转及当前项的设置方法实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue引入css文件导致全局污染的问题

    vue引入css文件导致全局污染的问题

    这篇文章主要介绍了vue引入css文件导致全局污染的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue watch immediate方法用法详解

    vue watch immediate方法用法详解

    这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue便签的简单实现

    Vue便签的简单实现

    本文主要介绍了Vue便签的简单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

    vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

    这篇文章主要介绍了vuecli3打包后出现跨域问题,前端配置拦截器无效的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue结合element-ui使用示例

    vue结合element-ui使用示例

    这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 基于vue 添加axios组件,解决post传参数为null的问题

    基于vue 添加axios组件,解决post传参数为null的问题

    下面小编就为大家分享一篇基于vue 添加axios组件,解决post传参数为null的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue下拉框加分页搜索功能的实现方法

    Vue下拉框加分页搜索功能的实现方法

    开发任务中有这样一个需求,下拉框中需要展示超过5000条数据,甚至更多,这数据量直接整个页面卡死了,就想到在下拉框中加分页,下面小编通过实例代码介绍下Vue下拉框加分页搜索功能的实现,感兴趣的朋友一起看看吧
    2022-11-11
  • vue中的stylus及stylus-loader版本问题

    vue中的stylus及stylus-loader版本问题

    这篇文章主要介绍了vue中的stylus及stylus-loader版本问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 简单谈谈Vue中的diff算法

    简单谈谈Vue中的diff算法

    diff算法的本质是找出两个对象之间的差异,目的是尽可能复用节点。,下面这篇文章主要给大家介绍了关于Vue中diff算法的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue项目如何部署到Tomcat服务器上

    Vue项目如何部署到Tomcat服务器上

    这篇文章主要介绍了Vue项目如何部署到Tomcat服务器上,Vue中自带webpack,可以通过一行命令将项目打包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03

最新评论