Routing-Funktion in Vue3: Routing-Sprünge für SPA-Anwendungen implementieren

Vue3 ist derzeit eines der beliebtesten JavaScript-Frameworks, und in den letzten Updates hat Vue3 einige sehr nützliche neue Funktionen eingeführt, darunter leistungsfähigere Routing-Funktionen.

Es gibt einige Unterschiede zwischen der Routing-Funktion von Vue3 und Vue2, daher müssen wir das Routing von Vue2 überprüfen, bevor wir die Routing-Funktion von Vue3 lernen.

Routing in Vue2 wird durch die Verwendung von Vue Router implementiert. Zuerst müssen wir Vue Router im Projekt installieren und ihn dann in der Vue-Instanz konfigurieren. Für ein einfaches Routing-System müssen wir nur jeden Pfad und seine entsprechende Komponente angeben:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

Im obigen Code erstellen wir eine Vue Router-Instanz, die zwei Routen enthält: „/“ und „/about“. Wenn Benutzer diese URLs besuchen, rendert Vue Router die entsprechenden Komponenten.

Die wichtigste Änderung beim Routing in Vue3 besteht darin, die Verwendung von Routing-Funktionen durch die Verwendung einer neuen API zu vereinfachen. Als nächstes stellen wir die Routing-Funktion in Vue3 im Detail vor.

Vue3-Routing erstellen

Zuerst müssen wir Vue Router 4 installieren:

npm install vue-router@4

Dann müssen wir Vue Router in die Vue-Anwendung importieren und eine Vue Router-Instanz erstellen:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

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

export default router

Beachten Sie, dass wir Now Verwenden Sie die Funktion createRouter(), um Routen anstelle von new Router() zu erstellen.

Die wichtigste Änderung beim Routing in Vue3 besteht darin, dass die Routing-Funktion einen deklarativeren Ansatz verfolgt. Wir verwenden die Funktion createWebHistory(), um die Verwendung des HTML5-Verlaufsmodus anzugeben. Dies ist eine relativ neue Technologie, die es uns ermöglicht, die Seiten-URL sicherer zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Routen definieren

Die Art und Weise, Routen zu definieren, ist die gleiche wie bei Vue2. Wir können Routen mithilfe des Routen-Arrays definieren. Jede Route besteht aus einem Pfad und einer entsprechenden Komponente.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Routenparameter

Mithilfe von Routenparametern können wir dafür sorgen, dass URLs variable Werte haben. Beispielsweise können wir die folgende Route und URL konfigurieren:

const routes = [
  { path: '/user/:id', component: User }
]

Dadurch wird der :id-Teil in der URL zu einem Parameter, der einen beliebigen Zeichenfolgenwert akzeptieren kann, zum Beispiel:

/user/1
/user/abc
/user/123abc

Wir können $route.params in der Komponente verwenden um auf Routenparameter zuzugreifen. Zum Beispiel:

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

Dadurch werden die Routenparameter jedes Mal ausgegeben, wenn die Komponente erstellt wird.

Benannte Routen

Wir können die Route benennen, wenn wir sie definieren. Dies ist für bestimmte Routennavigationsmethoden nützlich, zum Beispiel:

const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' },
  { path: '/user/:id', component: User, name: 'user' }
]

Definieren Sie eine benannte Route, auf die wir über das Attribut $name zugreifen können.

router.push({ name: 'user', params: { id: 123 }})

Dadurch wird zur Benutzerkomponente mit der Parameter-ID gesprungen.

Routennavigation

Wir können die folgende Methode verwenden, um zu einer anderen Route zu navigieren:

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

Wenn wir Routing in einer Komponente verwenden, können wir das $route-Objekt verwenden, um auf die aktuellen Routeninformationen zuzugreifen.

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

Route Guards

Route Guards sind ein Mechanismus zur Überprüfung der Navigation, der es uns ermöglicht, Code vor oder nach dem Abfangen aller Routen auszuführen. In Vue3 können wir den folgenden Routenwächter verwenden:

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

Im beforeEach-Wächter können wir überprüfen, ob eingeloggt ist, oder den Benutzer veranlassen, die erforderlichen Aktionen auszuführen, um die Navigation fortzusetzen.

Zusammenfassung

Vue3 verfügt über einige wesentliche Verbesserungen beim Routing, wodurch es einfacher zu verwenden ist als Vue2. Der deklarativere Ansatz erleichtert die Definition und Verwendung von Routen. Darüber hinaus führt Vue3 auch den HTML5-Verlaufsmodus ein, der das Routing sicherer und benutzerfreundlicher macht.

Mit der Routing-Funktion von Vue3 können Sie Ihre eigene SPA-Anwendung erstellen und problemlos springen und navigieren.

Das obige ist der detaillierte Inhalt vonRouting-Funktion in Vue3: Routing-Sprünge für SPA-Anwendungen implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!