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比较文档位置
Apr 08 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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正则提取图片地址
2014/03/27 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
python执行使用shell命令方法分享
2017/11/08 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python的re模块使用方法详解
2019/07/26 Python
Pytorch to(device)用法
2020/01/08 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python字典与json转换的方法总结
2020/12/28 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
办公室前台岗位职责
2014/01/04 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
律政俏佳人观后感
2015/06/09 职场文书
golang中的空接口使用详解
2021/03/30 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
java设计模式--七大原则详解
2021/07/21 Java/Android