element ui 中 el-menu 如何添加链接router-link标签

在vue项目中,使用elementui 框架,做一个后台管理系统
在写左边菜单,菜用了,elementui 提供的组件 , el-menu 组件。但是组件没有链接,而我们知道添加链接使用router-link标签代码如下:

<el-menu-item :key="index" v-if="item.menuChilds.length==0" :index="item.menuUrl" >
            <i v-if="item.menuImgClass" :class="item.menuImgClass"></i>
            <router-link :to="item.menuUrl">
            <span slot="title">
              pw_item.menuName
            </span>
            </router-link>
          </el-menu-item>

在span外包了一个router-link , 链接没有问题,但是样式就出现问题了

最后终于发现了,不用加router-link, 官网给出了使用方法

  1. 在el-menu 标签中,添加router属性(:router=“true” 或者直接 )
  2. 绑定index 为要跳转的路由,即可以进行正常的跳转,并且样式正常
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
               :collapse="isCollapse" router>
        <template  v-for="(item,index) in menulist" >
          <!--没有子菜单-->
          <el-menu-item :key="index" v-if="item.menuChilds.length==0" :index="item.menuUrl" >
            <i v-if="item.menuImgClass" :class="item.menuImgClass"></i>
            <span slot="title">
              pw_item.menuName
            </span>
          </el-menu-item>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值