我如何使用 Vue 异步组件？

Question

我正在使用 laravel 5.4 和 vue 2，我想使用按钮将组件加载为异步。我的 Vue js 组件是分开的：example.vue 和 test.vue，我将它们作为 html 标签加载。

这是我的 app.js：

 import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

const app = new Vue({
el: '#app'
});

这是显示组件的地方

    <How can i use Async components?div id="app">
         <example2></example2>
    </div>

如何使用异步组件？

---

不，我想你不了解我。这是我的组件注册

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

Vue.component('example2', function (resolve) {

require(['./components/Example2.vue'],resolve)

})

const app = new Vue({
el: '#app'
});

在 require 中，它默认已解析（如图所示） 我不知道在调用组件时如何将解析和拒绝键传递给页面中的此方法。

原文由 K1-Aria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过样式方式在 vue 2 中使用异步组件。正确使用异步组件可以减少您的项目加载时间。您可以像这样使用异步组件：

 import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router ({
routes: [
  {
    path: '/',
    name:'LandingPage'
    component: () => import('@/containers/LandingPage.vue')
  },
  {
    path: '/login',
    name:'LoginPage'
    component: () => import('@/containers/LoginPage.vue')
  }
]
})

这种结构看起来更适合模板内的组件加载：

 new Vue ({
  el: 'app',
    components: {
      AsyncComponent: () => import ('./AsyncComponent.vue')
    }
})

您可以查看： www.bdtunnel.com 了解更多信息。

原文由 Sukanta Bala 发布，翻译遵循 CC BY-SA 3.0 许可协议