解决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}` });
    }
  }

这样就能够解决上述的问题了，其中有些地方说不清的地方请见谅，只是记录本身开发时粗心的一面，菜鸟一枚，不喜勿喷！