So erhalten Sie Sprungpfadparameter in Vue

Beim Routing in Vue müssen Sie häufig Parameter übergeben. Wie erhält man also die auf der Zielseite übergebenen Parameter? In diesem Artikel wird erläutert, wie Sie Sprungpfadparameter in Vue erhalten.

Es gibt zwei Möglichkeiten, Routen in Vue zu überspringen: Verwenden Sie das Vue-Router-Plug-In oder verwenden Sie window.location.href direkt auf der Seite, um zu springen. In beiden Fällen ist die Methode zum Erhalten der Sprungpfadparameter ähnlich.

Verwenden Sie das Vue-Router-Plug-In für den Routensprung.

Vue-Router ist ein offiziell von Vue bereitgestelltes Routing-Plug-In, das uns bei der Steuerung des Routings in Vue helfen kann. Im Vue-Router können die aktuellen Routing-Informationen, einschließlich der Sprungpfadparameter, über das $route-Objekt abgerufen werden.

Angenommen, wir haben eine Routing-Konfiguration wie folgt:

{
  path: '/detail/:id',
  component: Detail
}

Die :id hier zeigt an, dass es sich um einen Pfadparameter handelt, der über das Routing übergeben werden kann. Beispielsweise stellt /detail/123 die Detailseite mit der ID 123 dar.

Im Detail der Zielseite können wir die übergebenen Parameter über $route.params abrufen. Der Code lautet wie folgt:

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Im gemounteten Hook können Sie den im Sprungpfad übergebenen ID-Parameter über this.$route.params.id abrufen.

Verwenden Sie window.location.href direkt auf der Seite für den Routensprung.

In Vue können wir window.location.href auch direkt für den Seitensprung verwenden. Zum Beispiel:

window.location.href = '/detail?id=123';

Hier haben wir den ID-Parameter in die Sprung-URL eingefügt. Sehen wir uns an, wie wir diesen Parameter auf der Zielseite erhalten.

Wir können location.search verwenden, um den Parameterteil nach dem Fragezeichen im Sprungpfad abzurufen, und dann den regulären Abgleich verwenden, um den Wert des benötigten Parameters abzurufen. Der Code lautet wie folgt:

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 获取跳转路径参数字符串，去掉问号
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
    const id = query.match(reg)[2]; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Der obige Code gleicht den Wert des ID-Parameters über reguläre Ausdrücke ab und speichert ihn in der Variablen-ID.

Zusammenfassung

Die Methode zum Abrufen von Sprungpfadparametern in Vue ist sehr einfach. Unabhängig davon, ob Sie das Vue-Router-Plug-In verwenden oder zum Springen direkt window.location.href verwenden, können wir uns auf Objekte wie $route oder location to verlassen Erhalten Sie die übergebenen Parameter. In diesem Artikel werden zwei Methoden vorgestellt. Entwickler können je nach tatsächlicher Situation die für sie geeignete Methode auswählen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Sprungpfadparameter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!