vue.js - 我如何使用 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 中，它默认解析(如图所示)我不知道在调用组件时如何将 resolve 和 reject 键传递给页面中的此方法。

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获取更多信息。