Vue springt HTML mit Parametern

In Vue-Anwendungen müssen wir oft zwischen verschiedenen HTML-Seiten wechseln. Manchmal müssen wir Sprungparameter mitführen, um Geschäftsanforderungen zu erfüllen. In diesem Artikel wird erläutert, wie Sie mit Parametern in Vue-Anwendungen zu HTML-Seiten springen.

1. Vue Router verwenden

Vue Router ist der offizielle Routing-Manager von Vue.js, der problemlos Routing-Sprünge für SPA-Anwendungen implementieren kann. Durch die Verwendung von Vue Router in einer Vue-Anwendung können HTML-Seitensprünge einfach mit Parametern implementiert werden.

1. Vue Router installieren

Bevor Sie Vue Router verwenden, müssen Sie ihn zuerst installieren. Der spezifische Befehl lautet wie folgt:

npm install vue-router --save

Nach Abschluss der Installation führen Sie Vue Router wie unten gezeigt in das Vue-Projekt ein:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. Konfigurieren Sie das Routing

Bevor Sie Vue Router verwenden Um einen Routensprung durchzuführen, müssen Sie zuerst das Routing konfigurieren. Das Konfigurieren des Routings im Vue Router ist sehr einfach. Sie müssen lediglich das Routen-Array in der Vue-Instanz definieren. Zum Beispiel:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

Der obige Code definiert zwei Routing-Konfigurationen. Der entsprechende Pfad der ersten Route ist „/home“ und die Komponente ist Home; der entsprechende Pfad der zweiten Route ist „/detail/:id“, wobei „id“ ein dynamischer Parameter und die Komponente Detail ist.

3. Routensprung durchführen

Es ist sehr einfach, einen Routensprung in Vue Router durchzuführen. Verwenden Sie einfach die Router-Link-Komponente zum Springen oder verwenden Sie die Methode router.push, um programmgesteuert zu navigieren.

• Router-Link zum Springen verwenden

Mit der Router-Link-Komponente in der Vorlage der Vue-Komponente können Sie problemlos Routensprünge durchführen. Beispiel:

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

Im obigen Code wird die Router-Link-Komponente verwendet, um zur Route mit dem Namen „detail“ zu springen, und sie trägt den Parameter „id“ mit einem Wert von 123.

• Verwenden Sie die router.push-Methode zum Springen

Mit der router.push-Methode in der Vue-Komponente können Sie eine programmatische Navigation realisieren. Zum Beispiel:

this.$router.push({name: 'detail', params: {id: 123}})

Im obigen Code wird die Methode router.push verwendet, um zur Route mit dem Namen „detail“ zu springen und trägt den Parameter „id“ mit einem Wert von 123.

2. Verwenden Sie location.href

Zusätzlich zur Verwendung von Vue Router für Routensprünge können Sie auch die native location.href für Sprünge verwenden. Bei der Implementierung des Routensprungs über location.href muss die URL manuell gespleißt und die Parameter codiert werden.

1. Verwenden Sie location.href zum Springen

Die Verwendung von location.href zum Springen ist sehr einfach. Zum Beispiel möchten wir zur HTML-Seite mit dem Namen „detail“ springen und den Parameter „id“ mit einem Wert von 123 tragen, der wie folgt lauten kann:

location.href = '/detail.html?id=' + encodeURIComponent('123')

Im obigen Code wird die Methode encodeURIComponent zum Codieren verwendet Parameter. Dies geschieht, um zu vermeiden, dass Parameter Sonderzeichen enthalten, die zu einer fehlerhaften Weiterleitungs-URL führen.

2. Parameter auf der HTML-Seite abrufen

Nachdem wir zur HTML-Seite mit Parametern gesprungen sind, müssen wir die Parameter für die spätere Verwendung von der URL abrufen. In JavaScript können Sie den Parameterteil der URL über location.search abrufen. Angenommen, wir springen zur HTML-Seite mit dem Namen „detail“ und der Wert des Parameters „id“ ist 123. Sie können die Parameter über den folgenden Code erhalten:

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

Im obigen Code sind die Methoden RegExp und match Wird zum Abrufen der Parameter verwendet. Der Parameterteil der URL. Verwenden Sie die decodeURIComponent-Methode zum Dekodieren von Parametern, um Analysefehler zu vermeiden, die durch in Parametern enthaltene Sonderzeichen verursacht werden.

Zusammenfassend lässt sich sagen, dass die Verwendung von Vue Router für Routensprünge eine empfehlenswertere Methode ist. Es kann das Routing besser verwalten, schneller springen und entspricht eher der MVVM-Idee von Vue. Natürlich können wir auch die native location.href für Routing-Sprünge verwenden, aber wir müssen auf die Kodierung und Dekodierung der Parameter achten. In der tatsächlichen Entwicklung ist es notwendig, die geeignete Methode entsprechend der tatsächlichen Situation auszuwählen.

Das obige ist der detaillierte Inhalt vonVue springt HTML mit Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!