关于VUE + Element 侧边栏页面刷新后不高亮显示的问题

写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，针对这个问题特别提出以下见解：

直接贴代码：

<el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#333"
    >
      <el-menu-item  index="/situation" @click="go('/situation')"
        ><img src="../assets/img/qyts.png" alt="" /><span class="oneName"
          >全员态势</span
        ></el-menu-item
      >
      <el-submenu index="2" @click="go()">
        <template slot="title">
          <!-- <i class="el-icon-user"></i> -->
          <img src="../assets/img/jcsj.png" alt="" />
          <span class="oneName">基础数据</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/healthTable" @click="go('/healthTable')" class="twoName"
            >心率监测</el-menu-item
          >
          <el-menu-item index="/healthsleep" class="twoName" @click="go('/healthsleep')">活动状态</el-menu-item>
          <el-menu-item index="/healthmovement" class="twoName" @click="go('/healthmovement')">运动监测</el-menu-item>
          <el-menu-item index="/healthoxygen" class="twoName" @click="go('/healthoxygen')">血氧监测</el-menu-item>
          <el-menu-item index="/temperature" class="twoName" @click="go('/temperature')">体温监测</el-menu-item>
          <el-menu-item index="/police" class="twoName" @click="go('/police')">电子围栏</el-menu-item>
          <el-menu-item index="/Staydetection" class="twoName"  @click="go('/Staydetection')">停留监测</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/person" @click="go('/person')">
        <img src="../assets/img/grxx.png" alt="" />
        <span class="oneName">个人信息</span>
      </el-menu-item>
</el-menu>

这里使用了：
router模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，所以我将el-menu-item的index设置成了path路由
default-active则是当前激活菜单的index。

之后这里利用了以上两点，将default-active绑定为$route.path，例如当前页面是全员态势，那么就是/situation。这样即使刷新也不会失去高亮显示状态。