So erhalten Sie URL-Parameter in Vue ohne Routing

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist Vue als eines der beliebtesten Front-End-Frameworks in der Branche weit verbreitet. In Vue ist das Abrufen von URL-Parametern durch Routing eine häufige Anforderung und auch ein häufiges Problem bei der täglichen Entwicklung. Manchmal möchten wir jedoch keine URL-Parameter über Routing erhalten, möglicherweise aufgrund besonderer Geschäftsanforderungen. In diesem Artikel wird vorgestellt, wie Vue URL-Parameter ohne Routing erhält.

Lassen Sie uns zunächst verstehen, wie das Routing URL-Parameter erhält. In Vue können wir URL-Parameter über this.$route.query abrufen. Wenn der Parameter in der URL beispielsweise ?id=1 ist, kann er auf folgende Weise abgerufen werden:

this.$route.query.id  // 1

Aber in einigen Fällen möchten wir die URL-Parameter möglicherweise nicht durch Routing erhalten. möglicherweise aufgrund komplexer Geschäftslogik- oder Designlösungen usw. In diesem Fall können wir die URL-Parameter über das Fensterobjekt abrufen.

Das Folgende ist ein einfaches Beispiel, vorausgesetzt, unsere URL ist http://localhost:8080?id=1.

Zuerst müssen wir nativen JavaScript-Code verwenden, um die URL zu erhalten. Der Code lautet wie folgt:

let url = window.location.search

Im obigen Code kann window.location.search URL-Parameter abrufen, einschließlich Sonderzeichen wie „?“ und „=“.

Als nächstes müssen wir die Parameterwerte in der URL abfangen. Der Code lautet wie folgt:

let params = {}
if (url.indexOf('?') !== -1) {
    let arr = url.split('?')[1].split('&')
    arr.forEach((item) => {
        let val = item.split('=')
        params[val[0]] = val[1]
    })
}

Im obigen Code verwenden wir zunächst die if-Anweisung, um festzustellen, ob die URL das „?“-Zeichen enthält. Falls enthalten, verwenden Sie die Split-Methode, um den Parameterteil abzutrennen, und verwenden Sie die Schleifen- und Split-Methoden, um jedes Schlüssel-Wert-Paar zu trennen. Schließlich speichern wir den Parameternamen und den Parameterwert als Schlüssel-Wert-Paare in einem Objekt.

Schließlich können wir das params-Objekt verwenden, um den URL-Parameterwert abzurufen. Für die obige URL können wir beispielsweise den Parameterwert auf folgende Weise abrufen:

params.id  // 1

Zusammenfassend lässt sich sagen, dass wir die URL-Parameter über das Fensterobjekt abrufen können, ohne Routing zu verwenden. Welcher Ansatz Sie verwenden, hängt natürlich von Ihren spezifischen Geschäftsanforderungen und Gestaltungsmöglichkeiten ab.

Kurz gesagt, Vue ist ein sehr beliebtes Front-End-Framework. Beim Erlernen von Vue werden Sie unweigerlich auf die Notwendigkeit stoßen, URL-Parameter zu erhalten. Durch die beiden in diesem Artikel vorgestellten Methoden erlernen Sie die Fähigkeiten zum Abrufen von URL-Parametern ohne Routing und können komplexe Geschäftsanforderungen besser bewältigen.

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