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 相关文章推荐
js实现在字符串中提取数字
Nov 05 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue ​v-model相关知识总结
Jan 28 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
php图片上传存储源码并且可以预览
2011/08/26 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
Python之读取TXT文件的方法小结
2018/04/27 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python批量修改文件编码格式的方法
2018/05/31 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python collections模块的使用
2020/10/16 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
学历公证委托书
2014/04/09 职场文书
车间安全生产标语
2014/06/06 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
雷锋的观后感
2015/06/10 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android