So implementieren Sie einen Jump-in-Vue-Router

Vue ist derzeit eines der beliebtesten Frontend-Frameworks. Es bietet viele Tools, die Entwicklern helfen, Webanwendungen schneller und einfacher zu entwickeln. Der am häufigsten verwendete ist Vue Router. Vue Router ist der offizielle Routing-Manager von Vue.js, der problemlos Komponentenwechsel in SPA-Anwendungen (Single-Page-Anwendungen) implementieren kann. In diesem Artikel wird daher ausführlich vorgestellt, wie Vue Router Jump implementiert.

1. Grundkonzepte von Vue Router

Vue Router ist der offizielle Routing-Manager basierend auf Vue.js. Es trennt verschiedene Seitenkomponenten durch Routing und die getrennten Komponenten können flexibler verwaltet und verwendet werden. Darunter verfügt Vue Router über die folgenden wichtigen Konzepte:

1. Route

Route stellt den Pfad der Seite dar und kann auf verschiedene Routen zugreifen Angezeigt werden verschiedene Seiten oder Komponenten. Routen können dynamische Parameter enthalten, und wir können diese Parameter verwenden, um das Seitenverhalten, Komponentenanzeigeeffekte usw. zu steuern.

2. Router

Router ist eine Instanz in Vue.js, die zur Verwaltung des Routings der gesamten Seite verwendet wird. Wir können Router verwenden, um Routing-Switching zu implementieren, Routing-Änderungen zu überwachen und andere Vorgänge durchzuführen.

3. Routing-Komponente

Die Routing-Komponente sind die verschiedenen Komponenten, die wir im Routing anzeigen möchten, z. B. Anmeldeseite, Homepage, Benutzer Seite usw.

4. Routenansicht

Die Routenansicht ist eine -Komponente. Ihre Funktion besteht darin, die entsprechenden Komponenten dynamisch anzuzeigen, wenn sich die Route ändert .

2. Drei Möglichkeiten, in Vue Router zu springen

In Vue Router können wir auf die folgenden drei Arten springen:

#🎜🎜 #

Deklarative Navigation

Verwenden Sie das Router-Link-Tag, um einen Sprung zu erreichen, der das Klickereignis des Benutzers in eine Routing-Konvertierung im Programm umwandeln kann. Durch die Verwendung der deklarativen Navigation werden einige der Probleme vermieden, die mit der direkten Bearbeitung von URLs und der Verwendung von

-Tags einhergehen.

Codebeispiel:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

Programmatische Navigation

Rufen Sie $router in der Ereignismethode Object auf Verwenden Sie die Push- oder Replacement-Methode, um zur angegebenen Seite zu springen. Mithilfe der programmatischen Navigation lässt sich das Verhalten von Routensprüngen einfach steuern. Mit dem Objekt „$route“ können Sie auf Routenparameter zugreifen und Sprünge flexibel handhaben.

Codebeispiel:

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    toHome(){
      this.$router.push('/')
    },
    toAbout(){
      this.$router.push('/about')
    }
  }
}
</script>

Redirect

Umleitung bezieht sich auf die Weiterleitung, bevor zur angegebenen Seite gesprungen wird zuerst eine andere Seite. Wir können die Umleitungsmethode verwenden, um eine Umleitung zu implementieren, wodurch einige unnötige Zwischenschritte weggelassen werden und direkt auf die benötigte Seite zugegriffen werden kann.

Codebeispiel:

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

3. Vue Router-Parameterübergabe

Bei der Entwicklung von Webanwendungen müssen wir häufig Parameter zwischen Routen übergeben. Zeigen Sie verschiedene Seiten entsprechend verschiedenen Parametern an. In Vue Router können wir Parameter auf zwei Arten zwischen Routen übergeben: dynamisches Routing und Abfrageparameter.

Dynamisches Routing

Dynamisches Routing bezieht sich auf das Hinzufügen spezifischer Parameter zur Route und die anschließende Verwendung dieser Parameter zur Steuerung des Verhaltens der Seite. Die Parameterübertragungsmethode des dynamischen Routings ist relativ flexibel und Parameterwerte können jederzeit aktualisiert werden, wenn sich die Route ändert.

Codebeispiel:

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

Abfrageparameter

Abfrageparameter beziehen sich auf das Hinzufügen von ?key=value zur URL Möglichkeit, bestimmte Parameter zu übergeben. Die Methode zum Übergeben von Abfrageparametern ist relativ einfach und Parameterwerte können über das $route-Objekt abgerufen und aktualisiert werden.

Codebeispiel:

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

Zusammenfassung

In diesem Artikel werden hauptsächlich die Grundkonzepte von Vue Router, drei Methoden und Parameter des Routensprungs vorgestellt. Zwei Möglichkeiten Lieferung. In praktischen Anwendungen können wir verschiedene Methoden verwenden, um die Routing-Steuerung und -Verwaltung entsprechend unterschiedlichen Anforderungen zu implementieren. Ich hoffe, dass die Einführung in diesem Artikel jedem helfen kann, die Verwendung von Vue Router besser zu verstehen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Jump-in-Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!