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


Posted in Javascript onNovember 07, 2017

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实现路由跳转及当前项的设置方法实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
基于vue实现分页效果
Nov 06 #Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python实现简单http服务器
2018/04/12 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
村捐赠仪式答谢词
2014/01/21 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers