Une brève analyse des fonctions des composants asynchrones de Vue

Cet article vous propose une brève analyse des fonctions des composants asynchrones de Vue. Il contient des exemples de code correspondants. Les amis dans le besoin peuvent s'y référer.

export default new Router({
  routes: [
    {
      path: '/live',
      name: 'live',
      component: () => import('@/view/live/live.vue')
    }
  ]
})

Le code ci-dessus est une division de code de routeur très courante. Live.vue ne sera chargé que lorsque le code est acheminé vers live
Mais de cette façon, le processus d'obtention de live.vue le sera. être vide. Il n'y a rien et l'expérience n'est pas bonne. Cela peut être résolu en utilisant l'assembly asynchrone fourni par vue

新建一个 loadable.vue

<template>
    <index></index>
</template>

<script>
    import LoadingComponent from './load.vue' // LoadingComponents是 live.vue为获取前展示的内容
    export default {
        components: {
            index: () => ({
                component: import('@/view/live/live.vue'),
                // 异步组件加载时使用的组件
                loading: LoadingComponent,
                // 展示加载时组件的延时时间。默认值是 200 (毫秒)
                delay: 200,
                // 如果提供了超时时间且组件加载也超时了，
                // 则使用加载失败时使用的组件。默认值是：`Infinity`
                timeout: 3000
            })
        }
    }
</script>

然后修改router.js

export default new Router({
  routes: [
    {
      path: '/live',
      name: 'live',
      component: import('loadable.vue')
    }
  ]
})

De cette façon, il y aura un affichage de chargement personnalisé avant d'obtenir live.vue.
Mais il existe de nombreuses routes, nous Il est impossible d'écrire un fichier Loadable.vue pour chaque route, alors écrivez une fonction à résoudre

新建一个 loadable.js

import LoadingComponent from './load.vue'

export default (asyncComponent) => {
    const Com= () => ({
        // 这里vue官网可以知道具体有哪些参数可以设置
        // https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
        component: asyncComponent(),
        loading: LoadingComponent
    })
    return {
        render (h) {
          return h(Com, {})
        }
    }
}

然后修改一下router.js

import loadable from 'loadable.js'
export default new Router({
  routes: [
    {
      path: '/live',
      name: 'live',
      component: loadable (() => import('@/view/live/live.vue'))
    }
  ]
})

Une telle fonction asynchrone de vue minimaliste est complétée

Recommandations associées :

Comment VSCode introduit les composants Vue et les modules Js

Introduction à l'utilisation des attributs d'écoute vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!