02月13日,2022

vue采用vue-element-admin框架使用组件el-menu实现路由跳转

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' }
      })
}
问题解决。

本文链接:https://www.liaonian.com.cn/info_12.html

-- EOF --