Detaillierte Erläuterung der Routing-Funktion in Vue3: Anwendung zum Implementieren des Routing-Sprungs der SPA-Anwendung

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist Single Page Application (SPA) zum Mainstream der Front-End-Entwicklung geworden, und Routing ist ein integraler Bestandteil von SPA-Anwendungen. In Vue3 wurde die Routing-Funktion aktualisiert und verbessert, wodurch sie benutzerfreundlicher und leistungsfähiger wird. In diesem Artikel wird die Anwendung von Routing-Funktionen in Vue3 und die Implementierung von Routing-Sprüngen in SPA-Anwendungen ausführlich vorgestellt.

1. Routing-Funktion in Vue3

Routensprünge in Vue3 werden alle durch Routing-Funktionen vervollständigt .push()-Funktion zur Angabe des zu überspringenden Pfads. Unter diesen wird die Funktion createRouter () zum Erstellen eines Routers verwendet, der Verlaufsparameter gibt den Routing-Modus an und der Routenparameter definiert die Zuordnungsbeziehung zwischen Routing-Pfaden und Komponenten.

2. Routenwächter implementieren

In der tatsächlichen Entwicklung müssen wir manchmal Routensprünge begrenzen und kontrollieren. Zu diesem Zeitpunkt können wir den in Vue3 bereitgestellten Routenwächter (Route Guard) verwenden. Ein Routenwächter ist eine Funktion, die aufgerufen wird, wenn eine Route kurz davor steht, zu springen. In dieser Funktion können wir beurteilen und verarbeiten, um das Routing zu steuern. Vue3 bietet die folgenden Routenschutzfunktionen:

2.1 beforeEach

Diese Funktion wird vor jedem Routensprung aufgerufen. Die Rückgabe von true bedeutet, dass der Sprung fortgesetzt wird, und die Rückgabe von false bedeutet, dass der Sprung abgebrochen wird. Mit dieser Funktion können wir eine Anmeldeüberprüfung, eine Berechtigungsbeurteilung und andere Vorgänge durchführen.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

router.push('/home')

2.2 beforeRouteEnter

Diese Funktion kann nur innerhalb der Komponente verwendet werden. Diese Funktion wird aufgerufen, wenn die Komponente noch nicht erstellt wurde. Wir können die Komponenteninstanz in dieser Funktion abrufen und sie nach dem Abrufen bedienen.

router.beforeEach((to, from, next) => {
  // to: 即将要跳转的路由
  // from: 当前页面正要离开的路由
  // next: 控制路由是否可以跳转的函数

  const loggedIn = localStorage.getItem('user')

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

2.3 beforeRouteUpdate

Diese Funktion wird aufgerufen, nachdem die Route gesprungen ist, die aktuelle Komponente jedoch weiterhin wiederverwendet wird. In dieser Funktion können wir die Daten der Komponente aktualisieren.

export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/user').then(response => {
      if (response.data.isAdmin) {
        next()
      } else {
        next('/403')
      }
    })
  }
}

3. Implementieren Sie dynamisches Routing

Manchmal müssen wir Routing-Pfade beim Routing von Sprüngen dynamisch generieren. Vue3 bietet die Funktion „Dynamic Route“. Dynamisches Routing wird durch das Hinzufügen von Platzhaltern zum Routingpfad implementiert. Die Platzhalter beginnen mit „:“.

export default {
  beforeRouteUpdate(to, from, next) {
    const id = to.params.id
    axios.get(`/user/${id}`).then(response => {
      this.user = response.data
      next()
    })
  }
}

Im obigen Beispiel haben wir die dynamische Generierung von Routing-Pfaden durch den Platzhalter „:id“ erreicht. Beim Routing von Sprüngen können wir den ID-Wert im Pfad über to.params.id abrufen.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

4. Verschachteltes Routing implementieren

Für komplexe Seiten müssen wir manchmal verschachteltes Routing implementieren. Vue3 bietet auch Unterstützung für verschachteltes Routing. Wir können verschachteltes Routing implementieren, indem wir Unterrouten in übergeordneten Routen und Unterrouten definieren.

router.push({ path: `/user/${userId}` })

Im obigen Beispiel haben wir in der Home-Route zwei Unterrouten definiert, Liste und Detail. In der List-Komponente können wir Unterrouteninformationen über das Children-Attribut des $route-Objekts abrufen.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: List
        },
        {
          path: 'detail/:id',
          component: Detail
        }
      ]
    }
  ]
})

5. Zusammenfassung

In Vue3 ist die Routing-Funktion einer der Schlüssel zur Implementierung von SPA-Anwendungen. Durch Routing-Funktionen können wir Routing-Sprünge, Routing-Guards, dynamisches Routing, verschachteltes Routing und andere Funktionen implementieren. Für Entwickler ist die Beherrschung der Verwendung von Routing-Funktionen ein sehr wichtiger Schritt und auch die einzige Möglichkeit, die Front-End-Entwicklungsfähigkeiten zu verbessern.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Routing-Funktion in Vue3: Anwendung zum Implementieren des Routing-Sprungs der SPA-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!