解決Vue-iview封裝導航欄刷新，導航欄消失之坑

1.前言

記錄一次跳轉路由時，導航欄選中消失的神祕事件。

2.事情原圖

請看這張圖，一開始路由跳轉到這頁面時，導航欄是有高亮的，可是在刷新的時候，高亮就消失了；
總所周知，客戶是一種能夠從雞蛋裏面挑出骨頭的神祕生物。

3.康康代碼

• 頁面代碼

<Menu v-show="!collapsed" width="auto" @on-select="handleSelect">
      <template v-for="item in menuList">
        <menu-submenu
          v-if="item.children"
          :key="`menu_${item.name}`"
          :name="item.name"
          :parent="item"
        ></menu-submenu>
        <menu-item v-else :key="`menu_${item.name}`" :name="item.name">
          <Icon :type="item.icon" />
          {{ item.title }}
        </menu-item>
      </template>
    </Menu>

• 邏輯代碼

props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleSelect(name) {
      this.$router.push({ name: `${name}` });
    }
  }

上述代碼是我封裝到公共組件的導航欄代碼，主要是判斷是否有多級菜單（這不是咱們重點）。

4.解答

遇到問題就要解決，不懂的狀況下，只好上網找答案了，可是網絡上的答案五花八門，看的你眼花繚亂。
最後仍是靠本身摸索了

• 首先個人路由給須要跳轉的頁面都會加上name值，固然也有些頁面不須要name值，跳轉的方式是this.$router.push();
• iview官網有提供一個參數，active-name，這個就好像css裏面的active，能夠選中指定的菜單

• 在封裝的組件頁面<Menu>綁定當前要指定的菜單
• 這裏要用到mounted生命週期，在頁面渲染後獲得導航欄的name值，網上說還要用updated這個生命週期，其實不須要；
• 點擊跳轉的時候，跳到與路由name值相同的頁面

詳細代碼：

//template
    <Menu v-show="!collapsed" width="auto" @on-select="handleSelect" :active-name="isShow">
    // XXXX
    </Menu>
//script
  data() {
    return {
      isShow: "test-group"
    };
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.isShow = this.$route.name;
  },
  methods: {
    handleSelect(name) {
      this.isShow = name;
      this.$router.push({ name: `${name}` });
    }
  }

這樣就能夠解決上述的問題了，其中有些地方說不清的地方請見諒，只是記錄本身開發時粗心的一面，菜鳥一枚，不喜勿噴！