Andere Vorgänge für das Vue.js-Routing

Dieses Mal werde ich Ihnen andere Vorgänge von Vue.jsRouting vorstellen Was sind die Vorsichtsmaßnahmen für andere Vorgänge bei der Verwendung von Vue.js-Routing? Werfen wir einmal einen Blick.

Basierend auf dem aktuellen Pfad zu Apple springen

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

Wenn Sie zum Stammverzeichnis springen möchten, fügen Sie /

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

vor Apple if hinzu gebunden, Wir können den Pfad auch dynamisch ändern

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

Wenn wir ihn binden und den Pfad nicht dynamisch ändern möchten, können wir ihn auch direkt schreiben,

Hinweis: Apple muss Andernfalls sucht er in den Daten nach Apple und meldet einen Fehler, dass das -Objekt nicht gefunden werden kann

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

Der Parameter

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

durch das Tag und den Link. Werden Sie ein Li-Tag, natürlich können Sie ihn auch auf andere Tags setzen

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

* Die oben genannten sind alle deklarativ Navigation
Erleben Sie die programmatische Navigation
durch Drücken, Springen zu einer bestimmten Seite

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

Anwendungsszenario:
Wenn wir die Route wechseln, legen Sie einige Vorgänge für ihn fest

Zum Beispiel: Überprüfen Sie den Anmeldestatus des Benutzers. Wenn der Benutzer nicht angemeldet ist, springen Sie über die programmgesteuerte Navigation zur Anmeldeschnittstelle
router.beforeEach(router.push('login interface '))

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue-Tag-Attribute und bedingtes Rendering von Vue.js

Listen-Rendering v von Vue.js -für Array-Objekt-Unterkomponente

Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js

Das obige ist der detaillierte Inhalt vonAndere Vorgänge für das Vue.js-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!