So implementieren Sie einen Seitensprung in VueJS

Vuejs-Methode zum Implementieren eines Seitensprungs: 1. Verwenden Sie die Anweisung „...“. push({path: 'Seiten-URL-Adresse' })“-Anweisung.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Zwei Möglichkeiten für Vue-Routing, Seitensprünge zu implementieren (Router-Link und JS)

1. Durch

wird die Komponente a verwendet Navigationslink zum Wechseln verschiedener HTML-Inhalte. Verwendung: Einfache Schreibmethode.

<router-link to="demo2">demo2</router-link>

. V-Bind-Schreibmethode Wie schreibt man

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

Um hier Parameter zu übergeben, müssen Sie den Pfad von demo2 in

router.js

konfigurieren. Fügen Sie nach demo2 im Pfad das Platzhalterzeichen: und die entsprechende userId

wie folgt hinzu:

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

Nach dem Die Konfiguration ist abgeschlossen, die Seite Das Sprungergebnis ist

/demo2/123

Die „123“ hier ist die

userId

• Also, wie bekomme ich den übergebenen Parameter

  userId
auf der neuen Seite?

use

this. $ Route springen Das Ergebnis der Übertragung ist

/demo2?plan=private (Beachten Sie, dass der Pfad in router.js

nicht konfiguriert werden muss)

Rufen Sie den übergebenen Adress-Schlüssel-Wert-Paar-Plan auf der neuen Seite ab , das in

mounted sein kann. Verwenden Sie this.$route.plan.xx

im Hook, um das übergebene Adress-Schlüssel-Wert-Paar wie folgt zu erhalten:

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
  },

2 Implementiert durch JS ---this. $router.push()

template Teil:

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

script Teil: (Anmerkung: hier ist Router, oben ist Route)

Einfache Art des Schreibens

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

Wie zum Schreiben von Parametern

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

Eingehendes Adress-Schlüssel-Wert-Paar

<button @click="toURL">跳转页面</button>

Verwandte Empfehlungen: „

vue.js Tutorial

“

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