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"
            style="cursor:pointer"
            :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
      }
    }