Comment utiliser Vue-Router pour implémenter le chargement paresseux des routes dans une application Vue ?

Dans les applications Vue, l'utilisation de Vue-Router pour implémenter le chargement paresseux des routes peut considérablement améliorer les performances de l'application. Grâce au chargement différé de routage, certains codes et composants peuvent être chargés uniquement lorsqu'ils sont nécessaires, évitant ainsi de tous les charger au début de l'application, réduisant ainsi le temps de chargement de l'application et améliorant l'expérience utilisateur.

Vue-Router est le gestionnaire de routage officiel de Vue.js, qui peut implémenter la fonction de routage de l'application. Pour utiliser Vue-Router dans Vue pour implémenter le chargement paresseux des routes, vous devez utiliser la fonction de fractionnement de code dans Webpack. Cet article expliquera comment utiliser Vue-Router pour implémenter le chargement paresseux des routes dans les applications Vue et fournira des exemples de code spécifiques.

Étape 1 : Installer Vue-Router

Pour utiliser Vue-Router pour implémenter le chargement paresseux des routes, vous devez d'abord installer Vue-Router. Utilisez npm pour installer Vue-Router :

npm install vue-router --save

Étape 2 : Créer une instance Vue

Dans l'option routeur de l'instance Vue, utilisez le chargement différé de routage :

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

new Vue({
  router
}).$mount('#app')

Dans le code ci-dessus, la fonction import() est utilisée pour importez les composants Foo et Bar et affectez-les à une variable en utilisant const. La fonction import() est ici la méthode d'importation dynamique fournie par Webpack, qui peut créer un bloc séparé pour chaque composant. Dans l'option routeur de l'instance Vue, utilisez simplement le composant importé directement.

Étape 3 : Routage de la configuration facultative du chargement paresseux

En plus d'utiliser la configuration Webpack par défaut pour le fractionnement du code, Vue-Router fournit également des configurations facultatives qui peuvent aider les développeurs à contrôler le fractionnement du code plus en détail et à améliorer l'efficacité du chargement paresseux. .

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})

• webpackChunkName : spécifiez un nom pour le composant et Webpack créera des morceaux pour chaque morceau en fonction du nom. Si deux composants utilisent le même nom, ils peuvent être placés dans le même bloc, réduisant encore davantage le temps de chargement paresseux.
• mode : utilisez le mode historique HTML5, la prise en charge du serveur est requise.
• fallback : Lorsque le navigateur ne prend pas en charge le mode historique HTML5, cette option précise s'il doit revenir en mode hachage.
• scrollBehavior : utilisé pour le comportement de défilement lors du passage à une page.
• base : URL de base. Par exemple, lors de l'utilisation de vue-router, si nous prévoyons de déployer l'application dans un sous-répertoire, utilisez l'option base pour spécifier le répertoire.
• linkActiveClass : Spécifie le nom de la classe CSS du lien actif.
• linkExactActiveClass : Spécifiez le nom de la classe CSS qui correspond exactement au lien d'activation.
• beforeEach : Global Routing Guard, qui peut être enregistré avant le hook de changement de routage.
• afterEach : Garde de routage global, qui peut être enregistré après le hook de changement de routage.

Résumé

L'utilisation de Vue-Router dans les applications Vue pour implémenter le chargement paresseux des routes peut considérablement améliorer les performances de l'application. Nous pouvons utiliser la fonction de fractionnement de code dans Webpack pour réaliser un chargement paresseux. Utilisez la fonction import() de Vue-Router pour importer le composant, affectez-le à une variable à l'aide de const, puis utilisez le composant importé dans les options de routage. Dans le même temps, Vue-Router fournit également des configurations facultatives, qui peuvent aider les développeurs à contrôler plus en détail le fractionnement du code et à améliorer l'efficacité du chargement paresseux.

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!