vue采用vue-element-admin框架,左侧一级菜单是框架自带的,在一级菜单右侧需要做一个二级菜单,使用组件el-menu需要实现路由跳转。百度了很多,就是没解决问题。经过读文档+尝试,发现两种方法可以实现跳转
第一种,最简单的在el-menu标签上增加router属性就可以,不用谢其他的方法,是最方便的
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:router="true"
default-openeds="['team','certification']"
v-for="item in menu">
<el-submenu :index="item.path" v-if="item.children">
<template slot="title">
<span>{{item.name}}</span>
</template>
<el-menu-item v-for="subitem in item.children" :index="subitem.path">{{ subitem.name }}</el-menu-item>
</el-submenu>
<el-menu-item :index="item.path" v-else>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
第二种办法,习惯的思维就是点击后使用this.$router.push()跳转
handleSelect(key, keyPath) {
this.$router.push({
path: key,
params: {data: 'query' }
})
}
问题解决。
