Maison > interface Web > Voir.js > 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 le faire ?

青灯夜游
Libérer: 2023-03-06 19:28:44
avant
2164 Les gens l'ont consulté

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 !

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

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;
Copier après la connexion

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;
Copier après la connexion

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal