Vue 官方文档：动态组件 & 异步组件

当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

问题出处

参考：洞香春：Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo
根据洞香春的例子，我在仿照练习时，遇到了动态加载组件的代码：从 menu.comfig.js 的对象中遍历键值对，进而创建路由。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'

Vue.use(Router)
var routes = []
menus.forEach((item) => {
  item.sub.forEach((sub) => {
    routes.push({
      path: `/${sub.componentName}`,
      name: sub.componentName,
      component: () => import(`@/components/layout/${sub.componentName}`)
    })
  })
})
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes
})

// menu.comfig.js
module.exports = [{
    name: '插件',
    id: 'plugin',
    sub: [{
        name: '管理插件',
        componentName: 'AddPluginLayout'
    }, {
        name: '配置插件',
        componentName: 'AddPluginConfigLayout'
    }]
}, {
    name: '人员',
    id: 'person',
    sub: [{
        name: '学生管理',
        componentName: 'StudentManageLayout'
    }, {
        name: '教师管理',
        componentName: 'TeacherManageLayout'
    }]
}]