不带路由器的vuejs延迟加载组件

时间:2019-09-03 18:14:55

标签: javascript typescript vue.js webpack

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

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

例如,此应用的初始加载将加载:

  • 标题
  • 汉堡菜单
  • 仪表板
    • 表格
      • 一种简单的形式
      • 根据用户的操作,会调用一个图片上传器
    • 仪表板过滤器控件
    • 列表视图

在初始加载时,用户必须看到除表单和过滤器控制框之外的所有上述内容。

基于文档,要延迟加载这些组件,我必须将它们包括在路由器中。.但是我不希望仅更改URL来打开表单。

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

1 个答案:

答案 0 :(得分: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
  }
})