代码如下;
<el-aside width="200px">
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item
v-for="(item, i) in list"
:key="i"
@click="handle(item, i)"
:class="index == item.path ? 'active' : ''"
>
<i :class="item.i_url"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</el-menu>
</el-aside>
data(){
return{
index: this.$route.path,
list:[
{
i_url: "el-icon-house",
title: "首页",
path: "/home"
},
{
i_url: "el-icon-house",
title: "列表页",
path: "/list"
},
{
i_url: "el-icon-house",
title: "详情页",
path: "/detail"
}
]
}
}
handle(item, i) {
this.index = item.path;
this.$router.push({ path: path });
}
<style scoped>
.el-aside >>> ul li.active {
background: #20a53a !important;
color: #fff !important;
font-size: 14px;
}
</style>