vue2+element-ui menu组件如何实现路由跳转

前言：作为写Java的前端实习生来说，对Vue太陌生了，一点都没接触过，一开始打算用jquery+bootstrap写，后来要求前后端分离。一提到前后端分离，我脑海中存在唯一的项目就是微信小程序了，这次做web端我也不知道用啥技术，请教了一下大佬，建议用vue，果不其然，两天上手了，可以说是一天把我前三天jquery的逻辑写完了，开发效率杠杠的。接触了这种mvvm的模式，终于理解为啥GitHub要抛弃jQuery了，遗憾的是一些老项目用的还是jquery，jsp，easyui等等。。哎还有俩月回学校，坚持坚持。

 

element-ui教程官网只提供了一个menu简单用法，没有提到如何实现路由跳转。话不多说，上代码。

 

<el-menu :default-active="$route.path" router class="menu"  mode="horizontal" @select="handleSelect">
          <el-menu-item index="/company">参赛公司</el-menu-item>
          <el-menu-item index="/device">参赛设备</el-menu-item>
          <el-menu-item index="/myMatches">我的报名</el-menu-item>
</el-menu>

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为当前项。