Vue 对 [非同步组件] 的第一类支持(https://vuejs.org/v2/guide/components.html#Async-Components)非常出色,但并非每个人都知道如何显示非同步组件在加载或未加载时。
开始的
使用 vue-cli和 webpack-simple模板启动一个简单的Vue项目。
我们将使用 Babel 默认不支持的动态导入功能,因此您需要快速添加一个小型的 Babel 插件来构建该项目。
1# Yarn
2$ yarn add babel-plugin-syntax-dynamic-import -D
3# NPM
4$ npm install babel-plugin-syntax-dynamic-import --save-dev
继续编辑 .babelrc 以快速添加该插件。
1[label .babelrc]
2{
3 "presets": [
4 ["env", { "modules": false }],
5 "stage-3"
6 ],
7 plugins": ["syntax-dynamic-import"]
8}
编写组件
现在让我们继续前进,并在App.vue旁边创建三个非常复杂的组件。
AsyncComponent.vue是我们将以非同步方式加载的内容。
1[label AsyncComponent.vue]
2<template>
3 <p>Ohai! I'm an asynchronously-loaded component!</p>
4</template>
AsyncLoadError.vue是我们会显示的,如果一些事情非常不对劲。
1[label AsyncLoadError.vue]
2<template>
3 <p>Oh noes! I was unable to load the asynchronous component. Cry face. :'(</p>
4</template>
AsyncLoading.vue将显示在AsyncComponent.vue正在加载时。
1[label AsyncLoading.vue]
2<template>
3 <p><em>Loading noises</em></p>
4</template>
Async 加载
现在,在App.vue中,按正常方式加载实用程序组件,但使用 AsyncComponent.vue 的 dynanmic import() 语法。
然后使用箭头函数注册AsyncComponent,返回配置对象. 此对象指定要使用哪些组件进行加载和错误状态,以及在考虑组件未加载之前需要等待多长时间。
您现在应该能够在您的应用程序中使用
1<template>
2 <div id="app">
3 <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/./assets/logo.png">
4 <h1>{{ msg }}</h1>
5 <h2>Essential Links</h2>
6 <ul>
7 <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
8 <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
9 <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
10 <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
11 </ul>
12 <h2>Ecosystem</h2>
13 <ul>
14 <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
15 <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
16 <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
17 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
18 </ul>
19
20 <async-component></async-component>
21 </div>
22</template>
23
24<script>
25import AsyncLoadError from './AsyncLoadError.vue'
26import AsyncLoading from './AsyncLoading.vue'
27const AsyncComponent = import('./AsyncComponent.vue')
28
29export default {
30 components: {
31 AsyncComponent: () => ({
32 // The component we want to load.
33 component: AsyncComponent,
34 // The component to use as a placeholder while the
35 // async component is loading.
36 loading: AsyncLoading,
37 // The component to render instead if there is an error
38 // loading the async component.
39 error: AsyncLoadError,
40 // The delay before the loading component is shown.
41 delay: 100,
42 // If this timeout is reached, the async component is considered
43 // to have failed loading.
44 timeout: 3000
45 })
46 },
47
48 name: 'app',
49 data () {
50 return {
51 msg: 'Welcome to Your Vue.js App'
52 }
53 }
54}
55</script>
如果你打开你的浏览器的开发工具,你应该注意到非同步组件是从一个不同的文件从你的应用程序的其他部分加载,你可能不会注意到加载和错误状态,除非有什么不对劲,或者你有一个非常缓慢的网络连接,但他们也会工作。
** 提示:** 您可以通过在 async 组件配置对象中设置时隔为0来测试错误状态。
这应该是你所需要的!