技術標籤：Element-UIVue前端VUEelementui

寫後臺管理系統 我們會經常用到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。這樣即使重新整理也不會失去高亮顯示狀態。