在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, 官网给出了使用方法
- 在el-menu 标签中,添加router属性(:router=“true” 或者直接 )
- 绑定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>