Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Utilisation de composants asynchrones Lorsque vous utilisez vue-router pour configurer le routage, vous pouvez utiliser des composants asynchrones pour implémenter le chargement des routes à la demande. Les composants asynchrones seront chargés uniquement lors de l'accès à la route, permettant ainsi un chargement à la demande. Il est à noter que l'utilisation de composants asynchrones nécessite l'utilisation de la syntaxe d'importation dynamique de webpack. Par exemple:

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

1. Utilisation de la fonction de fabrique de composants asynchrones de Vue, Vue fournit une fonction de fabrique de composants asynchrones pour implémenter le chargement des routes à la demande.Lorsque vous utilisez VueRouter pour configurer le routage, vous pouvez utilisercomponent: () => import('./views/Home.vue') pour définir des composants asynchrones. De cette façon, lors de l'accès à la route, le composant correspondant sera chargé dynamiquement.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  }
]

1. Utilisation de la fonction d'importation de composants introduits dynamiquement En utilisant la fonction d'importation de composants introduits dynamiquement dans ES6, vous pouvez implémenter le chargement à la demande des routes dans vue-router.Lors de la configuration du routage, vous pouvez utilisercomponent: () => import('./views/Home.vue')pour définir des composants asynchrones.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  }
]

Les trois méthodes ci-dessus permettent de charger les itinéraires à la demande. La méthode à choisir dépend des préférences personnelles et des besoins du projet.