Wie verwende ich Vue-Router, um das verzögerte Laden von Routen in einer Vue-Anwendung zu implementieren?

In Vue-Anwendungen kann die Verwendung von Vue-Router zur Implementierung des verzögerten Ladens von Routen die Leistung der Anwendung erheblich verbessern. Durch Routing Lazy Loading können einige Codes und Komponenten nur dann geladen werden, wenn sie benötigt werden. Dadurch wird vermieden, dass sie alle zu Beginn der Anwendung geladen werden, wodurch die Ladezeit der Anwendung verkürzt und die Benutzererfahrung verbessert wird.

Vue-Router ist der offizielle Routing-Manager von Vue.js, der die Routing-Funktion der Anwendung implementieren kann. Um Vue-Router in Vue zum Implementieren des verzögerten Ladens von Routen zu verwenden, müssen Sie die Code-Aufteilungsfunktion in Webpack verwenden. In diesem Artikel wird erläutert, wie Sie mit Vue-Router das verzögerte Laden von Routen in Vue-Anwendungen implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Schritt 1: Vue-Router installieren

Um Vue-Router zum Implementieren des verzögerten Ladens von Routen zu verwenden, müssen Sie zunächst Vue-Router installieren. Verwenden Sie npm, um Vue-Router zu installieren:

npm install vue-router --save

Schritt 2: Erstellen Sie eine Vue-Instanz

Verwenden Sie in der Router-Option der Vue-Instanz Routing Lazy Loading:

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')

Im obigen Code wird die Funktion import() verwendet Importieren Sie die Komponenten Foo und Bar und weisen Sie sie mit const einer Variablen zu. Die Funktion import() ist hier die von Webpack bereitgestellte dynamische Importmethode, mit der für jede Komponente ein separater Block erstellt werden kann. Verwenden Sie in der Router-Option der Vue-Instanz einfach die importierte Komponente direkt.

Schritt 3: Optionale Lazy-Loading-Konfiguration weiterleiten

Zusätzlich zur Verwendung der Standard-Webpack-Konfiguration für die Codeaufteilung bietet Vue-Router auch einige optionale Konfigurationen, die Entwicklern dabei helfen können, die Codeaufteilung detaillierter zu steuern und die Effizienz von Lazy Loading zu verbessern. .

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: Geben Sie einen Namen für die Komponente an und Webpack erstellt basierend auf dem Namen Chunks für jeden Chunk. Wenn zwei Komponenten denselben Namen verwenden, können sie im selben Block platziert werden, wodurch die Lazy-Load-Zeit weiter verkürzt wird.
• Modus: HTML5-Verlaufsmodus verwenden, Serverunterstützung ist erforderlich.
• Fallback: Wenn der Browser den HTML5-Verlaufsmodus nicht unterstützt, gibt diese Option an, ob er auf den Hash-Modus zurückgreifen soll.
• scrollBehavior: Wird für das Scrollverhalten beim Springen zu einer Seite verwendet.
• base: Basis-URL. Wenn wir beispielsweise bei Verwendung von vue-router planen, die Anwendung in einem Unterverzeichnis bereitzustellen, verwenden Sie die Option base, um das Verzeichnis anzugeben.
• linkActiveClass: Gibt den CSS-Klassennamen des aktiven Links an.
• linkExactActiveClass: Geben Sie den CSS-Klassennamen an, der genau mit dem Aktivierungslink übereinstimmt.
• beforeEach: Globaler Routing-Guard, der vor dem Routing-Change-Hook registriert werden kann.
• afterEach: Globaler Routing-Guard, der nach dem Routing-Change-Hook registriert werden kann.

Zusammenfassung

Die Verwendung von Vue-Router in Vue-Anwendungen zur Implementierung des verzögerten Ladens von Routen kann die Leistung der Anwendung erheblich verbessern. Wir können die Code-Aufteilungsfunktion in Webpack verwenden, um verzögertes Laden zu erreichen. Verwenden Sie die import()-Funktion von Vue-Router, um die Komponente zu importieren, weisen Sie sie mit const einer Variablen zu und verwenden Sie dann die importierte Komponente in den Routing-Optionen. Gleichzeitig bietet Vue-Router auch einige optionale Konfigurationen, die Entwicklern helfen können, die Codeaufteilung detaillierter zu steuern und die Effizienz des verzögerten Ladens zu verbessern.

Das obige ist der detaillierte Inhalt vonWie verwende ich Vue-Router, um das verzögerte Laden von Routen in einer Vue-Anwendung zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!