element-ui 左侧菜单栏默认高亮问题

<el-menu
      :default-active="$route.path"
      unique-opened
      :collapse-transition="false"
      router
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b">
          <el-menu-item
          :index="item.path"
          v-for="item in menulist"
          :key="item.id"
          >
          <!-- 图标 -->
          <i :class="iconsObj[item.id]"></i>
          <!-- 文本 -->
          <span slot="title">{{item.authName}}</span>
          </el-menu-item>
 </el-menu>

 // 左侧菜单数据
      menulist: [
        {
          id: 1,
          authName: '报名信息管理',
          path: '/registration'
        },
        {
          id: 2,
          authName: '注册用户管理',
          path: '/userRegist'
        },
        {
          id: 3,
          authName: '管理员注册',
          path: '/adminRegis'
        },
        {
          id: 4,
          authName: '管理员列表',
          path: '/adminList'
        }
      ],

将default-active设置为$route.path，el-menu-item的index设为要跳转的路由（并且点击菜单项，会直接push到点击的页面)

改变之前

<el-menu
      :default-active="activePath"
      unique-opened
      :collapse-transition="false"
      router
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b">
          <el-menu-item
          :index="item.path"
          v-for="item in menulist"
          :key="item.id"
          @click="saveNavState(item.path)"
          >
          <!-- 图标 -->
          <i :class="iconsObj[item.id]"></i>
          <!-- 文本 -->
          <span slot="title">{{item.authName}}</span>
          </el-menu-item>
</el-menu>

 // 被激活的链接地址
      activePath: ''
    }
  },
  created () {
    // 把值取出来
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      // 重新赋值解决刷新闪屏
      this.activePath = activePath
    }
  }

代码解释

1.在el-menu中关联高亮的链接地址

<el-menu :default-active="activePath"></el-menu>

2.在data中保存被激活的链接地址

export default {
  data() {
    return {
      // 被激活的链接地址
      activePath: ""
    };
  }
}

3.在具体的el-menu-item添加点击事件

//添加saveNavState事件，并传入路由地址
el-menu-item @click="saveNavState('item.path')

4.定义saveNavState函数

// 保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    }

5.在生命周期create时，获取地址

created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  }

6.此外，这种方法还可以实现许多其他有关刷新储存数据的功能