el-menu有一个属性:
可设置default-active="/users",设置index为/users的选项为激活状态
但是这样就写死了,选择其他选项的时候不会激活,故需要进一步优化。
主要思想,选中选项,将当前选中的选项的index替换掉default-active中的值
修改Home.vue
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#409EFF"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
:router="true"
:default-active="activePath"
>
......
<!--二级菜单-->
<!--启用el-menu中就会将index的值作为路由路径-->
<el-menu-item :index="'/'+ subItem.path" v-for="subItem in item.children"
:key="subItem.id" @click="saveNavState('/'+ subItem.path)">
.....
data() {
return {
//左侧菜单数据
menulist: [],
iconsObj: {
'125': 'el-icon-user-solid',
'103': 'el-icon-bank-card',
'101': 'el-icon-s-shop',
'102': 'el-icon-s-order',
'145': 'el-icon-s-data'
},
isCollapse: false,
//被激活的链接地址
activePath:''
}
},
....
created() {
this.getMenuList()
// this.saveNavState(window.sessionStorage.getItem('activePath'))
},
.....
//保存链接的激活状态
saveNavState(activePath){
this.activePath=activePath
// window.sessionStorage.setItem('activePath',activePath)
}