Vue3.0异步组件用法

异步组件

1.defineAsyncComponent，用于显式地定义异步组件

2.component选项被重命名为loader

3.loader函数不再接收resolve和reject函数，必须返回一个promise异步函数,明确组件定义不能直接提供

2.x语法

import { component } from ‘./model.vue’

Const component = {

        component: () => import(‘./model.vue’) (另一种写法 (resolve, reject) => {}),

        path: ‘/model’,

        name: ‘model’,

        meta: { title: ‘模型’， icon：‘icon’},

        children: [],

        delay: 200,

        timeout: 3000,

        errorComponent: ErrorComponent,

        loadingComponet: LoadingComponent

}

3.x语法

import { defineAsyncComponent } from ‘vue’

Const component = defineAsyncComponent(() => import(‘./model’))

Const component = defineAsyncComponent({

        loader: () => import(‘./model.vue’)(另一种写法() => new Promise((resolve, reject) => {})),

        path: ‘/model’,

        name: ‘model’,

        meta: { title: ‘模型’， icon：‘icon’},

        children: [],

        delay: 200,

        timeout: 3000,

        errorComponent: ErrorComponent,

        loadingComponet: LoadingComponent

})