现象说明:
代码实现:
<router-link to="/index"> // 关键节点,使用router-link,一旦使用了这个链接,那么就会出现上边的下划线了。
<el-menu-item index="0">
<template slot="title">
<i class="el-icon-s-home"></i>
<span>首页</span>
</template>
</el-menu-item>
</router-link>
<el-submenu :index="menu.name" v-for="menu in menuList">
<template slot="title">
<i :class="menu.icon"></i>
<span>{{ menu.title }}</span>
</template>
<router-link :to="item.path" v-for="item in menu.children"> // 关键节点,使用router-link,一旦使用了这个链接,那么就会出现上边的下划线了。
<el-menu-item :index = "item.name" @click="selectMenu(item)">
<template slot="title">
<i :class="menu.icon"></i>
<span>{{ item.title }}</span>
</template></el-menu-item>
</router-link>
</el-submenu>
解决方法:
<style scoped>
.el-menu{
height:100%
}
.router-link-active{
text-decoration: none;
}
a{
text-decoration: none;
}
</style>
解决效果: