elementUI的導航欄在刷新頁面的時候選中狀態消失的解決

首先elementUI的導航欄中的選中項的高亮顯示時的字體顏色可以在屬性中設置，但是高亮時的背景顏色不能設置，所以要自己修改高亮的背景顏色

.el-menu-item.is-active {
  background-color: #00b4aa !important;
}

 

在使用elementUI構建vue項目的時候會遇到頁面刷新的時候子路由會保持原來的，頁面中的內容也是當前對應路由的內容，但是elementUI的導航欄中的高亮顯示的卻失去了原來的狀態，以下是我解決這個內容的方法，暫時沒有發現什么問題，如果大家有什么問題可以提出來

<el-menu
      :default-active="activerouter"
      :router="true"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#00b4aa"
      @select="handleOpen"
      active-text-color="#fff"
    >

 

首先在elementUI的導航欄的標簽中設置

:default-active="activerouter"
其中activerouter是一個data中的變量，

 mounted() {
    //獲取地址欄中的路由，設置elementui中的導航欄選中狀態
    this.activerouter = window.location.pathname;
  },

 

在mounted中添加以上代碼，這樣在渲染之前先把當前的路由設置給導航欄的默認的路由，則刷新也是顯示的當前路由的內容，並且導航欄高亮的也是當前路由的那個選項了