vue+iview实现手动打开某一个菜单，应用updateActiveName和updateOpened方法

问题描述：当点击页面中的按钮想要改变菜单的选中项时，往往最想想到的是改变active-name和open-names中的值，但是直接改变这两个值并不能直接生效，有兴趣的可以打印下菜单的属性，会发现其实是已经改变了选中的选项，但是页面没有给与更新，所以我们需要用到iview菜单中提供的updateActiveName和updataOpened来进行实现。

1.首先我们需要一个写好的菜单栏，主要注意的是ref的值，以及操作菜单选项的值active-name和open-names的值。（注：本方法采用的是父子组件的形式实现的，同一个页面间不需要第二步，只需监听open-names的值即可）

<Menu
      :active-name="thisUrl"
      :open-names="[thisTitle]"
      :theme="theme"
      width="auto"
      ref="menus"
      :accordion="true"
      @on-select="mylcick"
    >
    <Submenu :name="itemb.title" v-for="(itemb, indexb) in Mdata" :key="indexb">
      <template slot="title">&emsp;{{ itemb.title }}</template>
      <!--二级菜单-->
      <template v-for="(itemc, indexc) in itemb.child">
         <MenuItem v-if="!itemc.child"
                      :key="indexc"
                      :name="itemc.url"
           >{{ itemc.name }}</MenuItem>
          <Submenu v-if="itemc.child&&itemc.child.length>0" :name="itemc.name" :key="'menuitem' + itemc.name">
            <template slot="title">{{ itemc.name }}</template>
              <template v-for="son in itemc.child">
                <MenuItem :name="son.url" :key="'menuitem' + son.name">
                  <span class="layout-text" :key="'title' + son.name">{{ son.name }}</span>
                </MenuItem>
              </template>
            </Submenu>
          </template>
        </Submenu>
    </Menu>

2.设置接收父组件传参的值,并对这个值进行watch监听。

  props: {
    title:{//这个是父组件的值
    	type:String,
      	required: true
    }
  },

3.对值进行监听。

  watch:{
    title: {
      handler(newName, oldName) {
        this.watchRoute(newName)
      }
    }
  },

4.调用watch监听事件中的方法,注意this.$refs后面的值，要和菜单栏中的ref的值一样，并且this.thisTitle = newName;要在this.$nextTick()方法之前，不然无法生效。

watchRoute(newName) {
  this.thisTitle = newName;
  this.$nextTick(() => {
   	this.$refs.meuns.updateActiveName()
    this.$refs.meuns.updateOpened();
   });
},

以上就是手动打开某一个菜单选项的实现过程，如果觉得有用请多多关注点赞，博主会分享自己使用的过程中遇到的难点问题，大家共同进步！

附：页面所需的数据二级菜单数据以及方法

data() {
    return {
      theme: "dark",
      thisUrl: "",
      thisTitle: "",
      Mdata: [
        {
          title: "区块链信息管理",
          child: [
            {name: "主子链信息", url: "/BApplicationChain"},
            {name: "节点信息", url: "/CNodeInformation"},
            {name: "命名规则", url: "/ANamingRules"}
          ]
        },
        {
          title: "应用链业务备案",
          child: [
            {name: "存证业务", url: "/ADepositBusiness"},
            {name: "智能合约", url: "/BIntelligentContract"}
          ]
        },
        {
          title: "智能安全监管",
          child: [
            {name: "训练模型管理", url: "/ATrainingModel"},
            {name: "训练数据管理", url: "/BTrainingData"},
            {name: "监管策略管理", url: "/CRegulatoryPolicy"},
            {name: "监管异常处理", url: "/DAbnormalDisposal"}
          ]
        },
        {
          title: "系统日志审计",
          child: [
            {name: "主链用户日志", url: "/ALogBrowsing"},
            {name: "子链业务日志", url: "/BDataServiceLog"},
            {name: "展示模板管理", url: "/Visualtemplate"}
          ]
        },
        {
          title: "平台用户管理",
          child: [
            {name: "主链用户", url: "/BRegistrationManagement"},
            {name: "子链用户", url: "/ApplicationChain"},
            {name: "跨链授权", url: "/CAuthorizationManagement"}]
      ]
    };
  },
  beforeMount() {
    let menuArr = [];
    var flatten = (items) => {
      if (items && items.child) {
        menuArr = menuArr.concat(items.child);
        items.child.forEach(i => {
          i.pTitle = items.text || items.title || '';
          flatten(i);
        })
      }
    }
    this.Mdata.forEach(i => {
      flatten(i);
    })
    if (this.$route.path != '/') {
      this.thisUrl = this.$route.path;
      let cMenu = _.find(menuArr, {url: this.thisUrl}) || {};
      this.thisTitle = cMenu.pTitle;
    } else {
      this.thisUrl = this.Mdata[0].child[0].child[0].url;
      this.thisTitle = this.Mdata[0].child[0].title;
    }
  },
  mylcick(url) {//这个放到methods中
    if (this.thisUrl == url) {
      return;
    }
    this.$router.push(url);
    this.thisUrl = url;
 }