关于iview二级标签刷新不定到当前页面的问题

   <Menu width="100%" ref="menu" :open-names="openNames" :active-name="activeMenu">
            <Submenu
              :name="item.name"
              class="menu-item"
              v-for="(item, index) in menuList"
              :key="index"
            >
              <template slot="title">
                <span class="menu-icon" style="margin-right:12px">
                  <Icon size="20" :type="Ico[index]" />
                </span>
                <Badge :dot="item.isNew">{{item.meta.title}}</Badge>
              </template>
              <MenuItem
                v-for="(childItem, childIndex) in item.children"
                :key="childIndex"
                :name="childItem.name"
              >
                <div class="second-menu" @click="goTo(childItem)">
                  <span class="menu-icon"></span>
                  <Badge :text="childItem.isNew ? 'new' : ''">{{childItem.meta.title}}</Badge>
                </div>
              </MenuItem>
            </Submenu>
          </Menu>

导航数据需要动态加载并生成，默认展开第一个submenu，激活第一个menu。

    this.activeName = '1-1',  //形式字符串-menuItem :name值同一
    this.openNames = ['1'],  //数组--submenu :name值统一

但是却出现了activeName生效，但是openNames不生效的情况，经上网查询，解决方案如下：

运用Menu的updateopened方法：手动更新展开的子目录，注意要在 $nextTick 里调用。对openNames添加watch：

watch: {
    openNames() {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();
        this.$refs.menu.updateActiveName();
      });
    },
  },

css部分：插槽

.drawer-menu {
  width: 180px;
  // height: calc(100% - #{100px});
  // top: 48px;
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1002;
  .menu-icon {
    // width: 180px;
    display: inline-block;
    text-align: center;
  }
  .ivu-badge-count {
    right: -15px;
    box-shadow: none;
  }
  .ivu-badge-dot {
    box-shadow: none;
    top: 18px;
    right: 8px;
  }
  // 二级标签
  .ivu-menu-item {
    color: rgba(0, 0, 0, 0.8);
    padding: 0 0 0 30px !important;
    height: 48px;
    line-height: 48px;
    .ivu-badge-count {
      top: 0;
    }
  }
  .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background: rgba(0, 0, 0, 0.03);
    color: #ff9900;
  }
  .formal-menu {
    width: 100%;
    height: 100%;
    .ivu-menu {
      // background-color: red;  //背景
    }
    .ivu-menu-vertical.ivu-menu-light:after {
      background: none;
    }
    .ivu-menu-submenu-title span > i {
      margin-right: 0;
    }
    .ivu-menu-submenu-title {
      .ivu-menu-submenu-title-icon {
        float: none;
        display: inline-block;
        right: 0;
        // margin-top: 10px;
      }
    }
    .ps__rail-y {
      z-index: 1001;
    }
    .menu-item {
      // width: 100%;
      // cursor: pointer;
      // background: none;
      // min-height: 48px;
      // color: red;
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      &.active {
        color: #ff9900;
      }
      .ivu-menu-item:hover,
      &.home-menu:hover,
      .ivu-menu-submenu-title:hover {
        color: #ff9900;
      }
    }
  }
  .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu):after {
    background-color: #ff9900;
  }
}