element 保存 点击链接_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>

原创文章，转载请写明出处