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系列(4) 立即调用的函数表达式
Jan 15 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
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
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP中phar包的使用教程
2017/06/14 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
js获取form的方法
2015/05/06 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
浅谈Python的异常处理
2016/06/19 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
班主任班级寄语大全
2014/04/04 职场文书
化工实习心得体会
2014/09/09 职场文书
法制教育演讲稿
2014/09/10 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
北京颐和园导游词
2015/01/30 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python