Wie wird das verzögerte Laden von Routen in Vue Router implementiert?-View.js-php.cn

Wie wird das verzögerte Laden von Routen in Vue Router implementiert?

WBOY

Freigeben： 2023-07-21 10:40:45

Original

2647 Leute haben es durchsucht

Wie wird das verzögerte Laden von Routen in Vue Router implementiert?

In der Vue-Entwicklung verwenden wir normalerweise Vue Router, um Sprünge und Routing-Steuerung zwischen Seiten zu implementieren. Wenn das Projekt groß wird, müssen möglicherweise viele Routing-Seiten geladen werden, was dazu führt, dass das gesamte Projekt langsam geladen wird. Um die Leistung des Projekts zu verbessern, bietet Vue Router einen Mechanismus zum verzögerten Laden von Routen.

Lazy Loading des Routings bedeutet, dass die Routing-Seite nur geladen wird, wenn darauf zugegriffen wird, anstatt alle Routing-Seiten zu laden, wenn die Anwendung initialisiert wird. Dies verkürzt die anfängliche Ladezeit und verbessert das Benutzererlebnis. Das verzögerte Laden von Routen im Vue Router wird durch dynamisches Importieren von Komponenten implementiert.

Zuerst müssen wir die asynchrone Importfunktion von Vue verwenden, um den dynamischen Import von Komponenten zu implementieren. Vue stellt die Funktion import() bereit, die ein Promise-Objekt zurückgibt. Nachdem das Promise-Objekt aufgelöst wurde, wird die angeforderte Komponente importiert. import()函数，它返回一个Promise对象，在Promise对象被解析之后，将会导入所请求的组件。

下面是一个示例，演示如何使用import()函数来实现组件的动态导入：

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

Nach dem Login kopieren

在上述代码中，Home和About是通过import()函数动态导入的组件。当这些组件被访问时，它们会被加载并渲染到相应的路由页面中。

接下来，我们需要修改Vue Router的路由配置，将组件的导入方式改为动态导入。在路由配置中，我们向component属性传递一个函数，而不是直接传递组件的引用。在这个函数中，我们使用import()函数来动态导入组件。

下面是一个示例，演示如何使用动态导入实现路由懒加载：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

Nach dem Login kopieren

在上述代码中，Home和About路由的组件通过箭头函数返回import()函数动态导入的结果。

通过以上步骤，我们就实现了Vue Router中的路由懒加载。当访问对应的路由页面时，组件会被动态导入和渲染，从而提高了应用的加载速度和性能。

总结起来，Vue Router的路由懒加载通过动态导入组件来实现。我们使用import()

Das Folgende ist ein Beispiel, das zeigt, wie die Funktion import() verwendet wird, um den dynamischen Import von Komponenten zu implementieren:

rrreee

Im obigen Code sind Home und About ist eine Komponente, die dynamisch über die Funktion <code>import() importiert wird. Wenn auf diese Komponenten zugegriffen wird, werden sie geladen und auf der entsprechenden Routing-Seite gerendert. 🎜🎜Als nächstes müssen wir die Routing-Konfiguration des Vue Routers ändern und die Komponentenimportmethode auf dynamischen Import ändern. In der Routing-Konfiguration übergeben wir eine Funktion an das Attribut component, anstatt die Komponentenreferenz direkt zu übergeben. In dieser Funktion verwenden wir die Funktion import(), um die Komponente dynamisch zu importieren. 🎜🎜Hier ist ein Beispiel, das zeigt, wie der dynamische Import verwendet wird, um das verzögerte Laden von Routen zu implementieren: 🎜rrreee🎜Im obigen Code die Komponenten der Routen Home und About werden über Pfeilfunktionen zurückgegebenimport() importiert das Ergebnis dynamisch. 🎜🎜Durch die oben genannten Schritte haben wir das verzögerte Laden von Routen im Vue Router implementiert. Wenn auf die entsprechende Routing-Seite zugegriffen wird, werden die Komponenten dynamisch importiert und gerendert, wodurch die Ladegeschwindigkeit und Leistung der Anwendung verbessert werden. 🎜🎜Zusammenfassend lässt sich sagen, dass das verzögerte Laden von Routen durch Vue Router durch den dynamischen Import von Komponenten implementiert wird. Wir verwenden die Funktion import(), um die Komponente zu importieren und als asynchrone Komponente zu verwenden. Dieser Ansatz kann die Ladezeit der Seite verkürzen und die Benutzererfahrung verbessern. 🎜🎜Ich hoffe, dass Sie durch die Einführung dieses Artikels ein grundlegendes Verständnis für das verzögerte Laden von Routen in Vue Router erlangen und es flexibel in tatsächlichen Projekten verwenden können. 🎜

Das obige ist der detaillierte Inhalt vonWie wird das verzögerte Laden von Routen in Vue Router implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!