element-ui的侧目录页面刷新之后失去高亮显示的问题

如图:
页面刷新之后高亮部分会恢复到第一个


element-ui的侧目录页面刷新之后失去高亮显示的问题_第1张图片
image.png

页面结构:一个大页面其中嵌套的子页面

思路:页面刷新的时候,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:'', //高亮部分的
      }
  },

你可能感兴趣的:(element-ui的侧目录页面刷新之后失去高亮显示的问题)