vue2中按需异步加载组件

Question

如上图的tabs页，每个tab下面都对应一个组件，怎么实现初次只渲染用户管理组件，等点配置管理时加载对应组件，且再次点击已经加载的tab时不会重新加载组件。

谢谢

Answer 1

那就是 keep-alive + 动态异步组件。

<div>
    <!-- tab 组件 -->
    <div>...</div>

    <!-- keep-alive 动态组件 -->
    <keep-alive>
      <component :is="currentTabComponent"></component>
    </keep-alive>
</div>

export default {
  // 异步组件
  components: {
    'tab-user': () => import('./tab-user'),
    'tab-config': () => import('./tab-config'),
    'tab-role': () => import('./tab-role'),
    'tab-task': () => import('./tab-task'),
  },
  data() {
    return {
      currentTabComponent: 'tab-user'
    };
  }
}

keep-alive + router-view 方案亦可，那动态加载的是路由组件了。