Qu'est-ce que le chargement paresseux des itinéraires dans Vue ? Pourquoi le faire ?

Qu'est-ce que le chargement paresseux des itinéraires dans vue ? Pourquoi avons-nous besoin de charger paresseux les itinéraires ? L'article suivant vous fera comprendre le chargement paresseux des routes dans Vue. J'espère qu'il vous sera utile !

Router le chargement paresseux

L'essence du chargement paresseux est le chargement paresseux ou le chargement à la demande, c'est-à-dire le chargement en cas de besoin.
Il n'est pas nécessaire de définir un chargement différé sur la page d'accueil Une page ne sera pas chargée à nouveau lorsque vous la visiterez à nouveau après son chargement.

Pourquoi le chargement paresseux des routes est nécessaire

• Lors de l'empaquetage et de la construction d'une application, le package d'implémentation de la logique de code emballé peut être très volumineux. Lorsque l'utilisateur souhaite l'utiliser, toutes les ressources seront demandées.

• Lorsque nous emballons séparément les composants correspondant aux différents itinéraires et les chargeons lors de l'accès à l'itinéraire, cela sera plus efficace. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

Qu'est-ce que le chargement paresseux de routage fait

• Chargez les composants correspondant à la route dans les packages js correspondants.

• Le composant correspondant ne sera chargé que lors de l'accès à l'itinéraire.

composant asynchrone vue

Syntaxe : component: solve=>(require(['Adresse de la route à charger']), résoudre) component：resolve=>(require(['需要加载的路由的地址'])，resolve)

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: resolve=>(require(["/@/views/404.vue"],resolve))
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

ES import 常用

用户访问组件时，该箭头函数被执行
webpack：import动态导入语法能将该文件单独打包
语法：const xxx = （）=>import('需要加载的模块地址')

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

L'importation ES est couramment utilisée

🎜Lorsque l'utilisateur accède au composant, la fonction flèche est exécutée🎜 webpack : la syntaxe d'importation dynamique d'importation peut empaqueter le fichier séparément🎜 Syntaxe : const xxx = () =>import('Adresse du module à charger')🎜rrreee🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜

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!