vue中使用动态挂载和懒加载，实现点击导航栏菜单弹出不同弹框

点击不同导航栏下的二级菜单，页面不变，弹出不同弹框，可以使用懒加载+动态组件挂载实现。

懒加载是为了按需引入，不用一次性将所有弹框引入，这样做可以提高性能；动态组件挂载是为了方便弹框切换。

具体实现如下：

HTML部分

<ul @click="showDown = false">
      <!-- 一级菜单 -->
      <li
        v-for="(item, index) in name"
        :key="index"
        @click="addClass(index)"
        :class="{ bgColor: index == current }"
      >
        <a href="javascript:;" ref="ch">{{ item.title }}</a>
        <!-- 二级菜单 -->
        <div
          class="down"
          ref="btn"
          v-show="current === index ? true : false"
          @click.stop="showDown = !showDown"
        >
          <p
            v-for="(itemq, i) in item.down"
            
            :key="i"
            :class="{ downColor: i == now }"
            @click="big(i, index)"
          >
            {{ itemq.title }}
          </p>
        </div>
      </li>
    </ul>

<!-- 弹框 -->
    <component message="我是子" ref="box" v-bind:is="whichcomp"></component>

JavaScript引入部分，应在data里

 name: [
        {
          title: '一级菜单1',
          down: [
            { title: '二级菜单1', component: () => import('./1.vue') },
            { title: '二级菜单2', component: () => import('./2.vue') }, 
            { title: '二级菜单3', component: () => import('./3.vue') },
            { title: '二级菜单4', component: () => import('./4.vue') }
          ]
        }]

JavaScript功能部分

big (i, index) {
      this.now = i
      this.whichcomp = this.name[index].down[i].component
      if (typeof (this.$refs.box) !== 'undefined') {
        this.$refs.box.show = true
      }
    }