1. Preface

When recording a jump route, the navigation bar selects the disappeared mysterious event.

2. Original picture

Look at this picture. At the beginning, when the route jumps to this page, the navigation bar is highlighted, but when it is refreshed, the highlight disappears.
As we all know, customers are mysterious creatures that can pick out bones from eggs.

3. Kangkang code

• Page code

    <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>

• Logic code

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

The above code is the navigation bar code that I encapsulate to the public component, mainly to determine whether there is a multi-level menu (this is not our focus).

4. answers

If you don't understand the problem, you have to go online to find the answer. But there are many answers on the Internet. You are dazzled.
Finally, I have to find out by myself.

• First of all, my route will add the name value to all pages that need to jump. Of course, some pages do not need the name value. The way to jump is this.$router.push();
• The iview official website provides a parameter, active name, which is like active in css. You can select the specified menu.

• Bind the current menu to be specified on the encapsulated component page < Menu >.
• In this case, you need to use the mounted life cycle to get the name value of the navigation bar after rendering the page. On the Internet, you need not use the updated life cycle.
• When clicking jump, jump to the same page as the route name value

Detailed code:

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

In this way, the above problems can be solved. Please forgive me for some of the unclear places, just record the careless side of your own development, a rookie, don't spray if you don't like it!