vue使用element-ui，頁面重新整理，導航欄選中問題

當你在使用縱向導航時，重新整理了頁面，左側導航顯示了預設的選項，導航發生了變化，而路由及頁面并未改變，那怎麼讓它選中路由的頁面呢

:default-active="activeIndex"
 data() {
      return {
        activeIndex: '1',
      };
    },
           

第一種方法：

把data中的activeIndex去除，改為計算屬性，這一步解決縱向導航欄的問題

computed: {
    activeIndex() {
      const arr = this.$route.path.split('/')
      console.log(arr) //根據你的情況看在第幾項
      if (arr[1] === 'page2') {
        return '/page2'
      } else if (arr[1] === 'page3') {
        return '/page3'
      } else {
        return '/'
      }
    }
  },
           

第一種看起來麻煩了點，但也能解決

第二種方法：

<el-menu
   :default-active="$route.path"
   class="menu"
   @select="handleSelect"
 >
   <el-menu-item index="/">
     <i class="el-icon-menu"></i>
     <span slot="title">page1</span>
   </el-menu-item>
   <el-menu-item index="/page2">
     <i class="el-icon-document"></i>
     <span slot="title">page2</span>
   </el-menu-item>
   <el-menu-item index="/page3">
     <i class="el-icon-setting"></i>
     <span slot="title">page3</span>
   </el-menu-item>
 </el-menu>
           

設定

:default-active="$route.path"

讓index等于路由

handleSelect (data) {
  this.$router.push({ path: data })
}