vuejs 延迟加载组件，无需路由器答案

【问题标题】：vuejs lazy loading components without the routervuejs 延迟加载组件，无需路由器
【发布时间】：2020-01-06 15:58:07
【问题描述】：

vue 中延迟加载组件用 webpack 并不难：https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/

我试图将应用程序的初始负载剥离到绝对的基础上。但我希望能够在没有路由器的情况下触发组件的导入。

例如，这个应用程序的初始加载将加载：

标题
汉堡菜单
仪表板
- 一个表格
  - 一个简单的表格
  - 根据用户操作，调用图像上传器
- 仪表板过滤器控件
- 列表视图

在初始加载时，用户必须看到上述所有内容，除了表单和过滤器控件框。

根据文档，要延迟加载这些组件，我必须将它们包含到路由器中。但我不希望 url 仅仅为了打开表单而改变。

如何在没有路由器的情况下将组件延迟加载到视图中？

【问题讨论】：

github.com/maoberlehner/…
有人已经建好了东西：D

标签： javascript typescript vue.js webpack

【解决方案1】：

如果有人需要这里的答案。
Vue 已经提供了延迟加载，没有任何插件，这是我最近发现的。

当然，这在没有 Vue 路由器的情况下也可以工作。

const Component1 = () => import(
  /* webpackChunkName: "/js/component-name" */ './components/Component1'
)

const Component2 = () => import(
  /* webpackChunkName: "/js/component-name2" */ './components/Component2'
)

 const app = new Vue({
  el: '#app',
  components: {
    Component1,
    Component2
  }
})

【讨论】：