如图:
页面刷新之后高亮部分会恢复到第一个
页面结构:一个大页面其中嵌套的子页面
思路:页面刷新的时候,window.location.href 获取当前的路由地址,el-menu这个组件里面的default-active的属性值对应el-menu-item的index的值,所以可以每次获取的地址匹配到对应的default-active的值
代码:
created(){
this.userName=this.$route.params.name
let href=window.location.href.split('/'+this.userName+'/')[1]
switch(href)
{
case 'userManager':
this.activeNav='1-1'
break;
case 'webManager':
this.activeNav='1-2'
break;
case 'course':
this.activeNav='2'
break;
case 'source':
this.activeNav='3'
break;
case 'courseType':
this.activeNav='4'
break;
case 'hot':
this.activeNav='5'
break;
}
},
data(){
return{
userName:'', //用户名
route:'', //路径
activeNav:'', //高亮部分的
}
},