Comment implémenter le chargement à la demande dans Vue-js tutoriel-php.cn

Comment implémenter le chargement à la demande dans Vue

亚连

Libérer： 2018-06-22 18:15:35

original

2030 Les gens l'ont consulté

Cet article présente principalement l'implémentation spécifique du chargement à la demande de Vue. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Concept (chargement paresseux)

Lors de l'empaquetage et de la construction d'une application, le package JavaScript deviendra très volumineux, affectant le chargement des pages. Si nous pouvons diviser les composants correspondant à différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route, eh bien, ce sera plus efficace.

Scénario

En tant qu'application monopage, le projet xxx adopte un modèle de développement basé sur les composants. Chaque fois que la page d'accueil est démarrée, tous les composants seront chargés, mais à ce moment-là, seule la page d'accueil est visitée. Voilà, ce qui entraîne un grand nombre de composants contaminant la situation de chargement.

Objectif

Chargez uniquement le composant correspondant lors de l'accès à la page actuelle pour éviter de charger tous les composants de la page. (Chargement à la demande)

Implémentation

app.vue

<template>
  <p id="app">
    <router-view/>
  </p>
</template>

Copier après la connexion

router.js

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import &#39;babel-polyfill&#39;
import {Promise} from &#39;es6-promise-polyfill&#39;
import App from &#39;../components/app&#39;

// 定义路由，每个路由映射一个组件。
const Routers = [
  {
    path: &#39;/&#39;,  // 路径
    component: resolve => require([&#39;../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: &#39;/login&#39;,
    component: resolve => require([&#39;../components/member/login&#39;], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
// 创建router实例，并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
  el:&#39;#app&#39;,
  router,
  // 将h作为createElement的别名是一个通用惯例。
  render: h =>(App) 
})

Copier après la connexion

Remarque : la fonction

require() accepte deux paramètres. Le premier paramètre est un tableau, indiquant les modules dépendants, tels que ['moduleA', 'moduleB']. Le deuxième paramètre est une fonction de rappel, qui sera appelée lorsque tous les modules précédemment spécifiés seront chargés avec succès. Les modules chargés sont passés en paramètres à cette fonction, ce qui leur permet d'être utilisés dans la fonction de rappel.

L'exemple de code utilise une méthode asynchrone pour charger les composants. La fonction require est responsable de l'introduction de manière asynchrone du composant à restituer, et la résolution est responsable du rendu de rappel asynchrone du composant.

babel-polyfill : transcoder et compiler Promise

npm install --save babel-polyfill

Copier après la connexion

es6-promise-polyfill résout les problèmes de compatibilité de Promise ; Pour les étudiants qui ne connaissent pas grand-chose à Promise, veuillez aller ici