Vue2+El-Menu 实现路由跳转及当前项的设置方法实例
Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+el-menu 实现路由跳转及当前项的设置方法实例主要介绍了 vue2+el-menu 实现路由跳转及当前项的设置，方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下。
实现路由跳转
要实现路由跳转，先要在 el-menu 标签上添加 router 属性，然后只要在每个 el-menu-item 标签内的 index 属性设置一下 url 即可实现点击 el-menu-item 实现路由跳转。例如：
```html
<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-menu-item-group>
</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>
```
设置当前项
在 el-menu 标签中绑定 `:default-active="$route.path"`，注意是绑定属性，不要忘了加“：”，当 `$route.path` 等于 el-menu-item 标签中的 index 属性值时，则该 item 为当前项。
总结
以上所述是小编给大家介绍的 vue2+el-menu 实现路由跳转及当前项的设置方法实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
知识点
1. 使用 vue2+el-menu 实现路由跳转需要在 el-menu 标签上添加 router 属性。
2. 设置当前项需要在 el-menu 标签中绑定 `:default-active="$route.path"`。
3. 使用 el-menu-item 标签的 index 属性设置 url，以实现路由跳转。
4. 使用 Vue.js 可以轻松实现路由跳转和当前项的设置。
相关资源
* Vue.js 官方文档：https://vuejs.org/v2/guide/
* El-Menu 官方文档：https://element.eleme.io/#/zh-CN/component/menu
