Praktisches Beispiel für verschachtelte Routen im vue.js Router

Vorwort

Wenn Ihre Vue.js-Single-Page-Anwendung (SPA) relativ komplex wird, benötigen Sie Vue-Router und verschachtelte Routen. Verschachtelte Routen ermöglichen komplexere Benutzeroberflächen und ineinander verschachtelte Komponenten. Lassen Sie uns einen relativ einfachen Anwendungsfall erstellen, um die Nützlichkeit verschachtelter Routen in Vue Router zu demonstrieren.

Einrichten mit Vue CLI

Falls es noch nicht installiert ist, führen Sie den folgenden Befehl aus, um Vue CLI global zu installieren:

$ npm install -g @vue/cli

oder

$ Garn global hinzufügen @vue/cli

Jetzt können Sie Vue-Befehle über die Befehlszeile ausführen. Erstellen wir eine Vue-App namens „alligator-nest“:

$ vue erstellt Alligatornest

Wählen Sie bei der Eingabeaufforderung die Standardvorgabe aus (drücken Sie die Eingabetaste). Führen Sie anschließend den folgenden Befehl aus:

$ npm installiere vue-router

Öffnen Sie dann das Verzeichnis „Alligator-Nest“ im Editor Ihrer Wahl.

Basiscode

Das folgende CSS hilft uns, die Elemente für unsere Benutzeroberfläche zu positionieren. Fügen Sie es als Stylesheet-Datei im Ordner „public/“ hinzu und referenzieren Sie es in „public/index.html“. Dazu verwenden wir CSS Grid:

Raster.css

.Zeile1 {
  Rasterzeilenstart: 1;
  Gitterzeilenende: 2;
}

.Zeile12 {
  Rasterzeilenstart: 1;
  Gitterzeilenende: 3;
}

.row123 {
  Rasterzeilenstart: 1;
  Gitterzeilenende: 4;
}

.Zeile2 {
  Rasterzeilenstart: 2;
  Gitterzeilenende: 3;
}

.row23 {
  Rasterzeilenstart: 2;
  Gitterzeilenende: 4;
}

.Zeile3 {
  Rasterzeilenstart: 3;
  Gitterzeilenende: 4;
}

.col1 {
  Rasterspaltenanfang: 1;
  Gitterspaltenende: 2;
}

.col12 {
  Rasterspaltenanfang: 1;
  Gitterspaltenende: 3;
}

.col123 {
  Rasterspaltenanfang: 1;
  Gitterspaltenende: 4;
}

.col1234 {
  Rasterspaltenanfang: 1;
  Gitterspaltenende: 5;
}

.col2 {
  Rasterspaltenanfang: 2;
  Gitterspaltenende: 3;
}

.col23 {
  Rasterspaltenanfang: 2;
  Gitterspaltenende: 4;
}

.col234 {
  Rasterspaltenanfang: 2;
  Gitterspaltenende: 5;
}

.col3 {
  Rasterspaltenanfang: 3;
  Gitterspaltenende: 4;
}

.col34 {
  Rasterspaltenanfang: 3;
  Gitterspaltenende: 5;
}

.col4 {
  Rasterspaltenanfang: 4;
  Gitterspaltenende: 5;
}

Nehmen wir als Nächstes einige Änderungen an den von vue-cli hinzugefügten Standarddateien vor.

Löschen Sie HelloWorld.vue aus dem Ordner src/components und löschen Sie alles, was damit zusammenhängt, aus src/App.vue. Nehmen Sie die folgenden Änderungen an der HTML-Auszeichnung und den CSS-Stilen in App.vue vor.

<Vorlage>
  <div id="app">
    <h1 class="row1 col12">Alligatorennest</h1>
    <a class="row1 col3">Reisen</a>
    <a class="row1 col4">Über</a>
    <div Klasse="Zeile2 col234"></div>
  </div>
</Vorlage>
html, Text {
  Höhe: 100vh;
  Breite: 100vw;
  Polsterung: 0;
  Rand: 0;
}

#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Farbe: #2c3e50;
  Polsterung: 2%;
  Höhe: 100%;
  Anzeige: Raster;
  Raster-Vorlagenzeilen: 20 % 80 %;
  Rastervorlagenspalten: 25 % 25 % 25 % 25 %;
}

Wenn Sie „npm run serve“ im Stammverzeichnis Ihres Projekts ausführen, können Sie in Ihrem Browser mit der Maus über „localhost:8080“ fahren und das Skelett-Layout anzeigen. Diese display:grid-Eigenschaften sind nützlich! Jetzt können wir mit der Erstellung von Routen beginnen.

Geben Sie den Vue-Router ein

Erstellen Sie eine Komponente namens AboutPage.vue im Ordner /components. Es sieht so aus:

<Vorlage>
  <div>
    <h2>Über</h2>
    <p>Alligatoren gab es schon zur Zeit der Dinosaurier.</p>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: 'AboutPage',
  }
</Skript>

<Stilbereich>
  
</Stil>

Jetzt erfordert unsere Datei main.js die Route /about. Es sieht so aus.

importiere VueRouter von „vue-router“;
importiere Vue von „vue“;
App aus „./App.vue“ importieren;

Vue.config.productionTip = falsch;

importiere VueRouter von „vue-router“;
Vue.use(VueRouter);

importiere AboutPage aus „./components/AboutPage.vue“;

const Routen = [
  { Pfad: '/about', Komponente: AboutPage },
]

const router = neuer VueRouter({
  Routen
})

neuer Vue({
  rendern: h => h(App),
  Router
}).$mount('#app');

Kehren wir abschließend zu App.vue zurück und ändern das Ankertag „About“ in ein <router-link>-Tag mit dem Attribut to="/about" . Ändern Sie dann das zweite Div in ein <router-view>-Tag. Stellen Sie sicher, dass die Klasseneigenschaften der Rasterpositionierung unverändert bleiben.

Wir verfügen nun über ein voll funktionsfähiges Site-Skelett mit Routing für die Info-Seite.

Wir konzentrieren uns hier auf das Routing, daher werden wir nicht zu viel Zeit mit dem Styling verbringen. Wir möchten allerdings auch, dass die Seite „Reisen“ etwas eleganter aussieht.

Erstellen Sie zunächst eine Reiseseite auf die gleiche Weise, wie Sie die Infoseite erstellt haben. Referenzieren Sie es in main.js.

Sie müssen außerdem die folgenden beiden Komponenten erstellen, die letztendlich in TravelPage.vue verschachtelt werden:

TravelAmericaPage.vue

<Vorlage>
  <div>
    <p>Alligatoren kommen in den amerikanischen Bundesstaaten Louisiana und Florida vor.</p>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "ReiseAmerikaSeite"
  }
</Skript>

<Stilbereich>
</Stil>

TravelChinaPage.vue

<Vorlage>
  <div>
    <p>Im chinesischen Jangtse-Tal gibt es Alligatoren.</p>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: „ReiseChinaSeite“
  }
</Skript>

<Stilbereich>

</Stil>

Konfigurieren verschachtelter Routen

Aktualisieren wir nun sowohl main.js als auch TravelPage.vue, um untergeordnete Elemente zum Verweisen auf diese verschachtelten Routen zu verwenden. main.js muss aktualisiert werden, um die folgende Definition für die Routenkonstante zu haben:

const Routen = [
  {
    Pfad: '/travel', Komponente: TravelPage,
    Kinder: [
      { Pfad: '/travel/america', Komponente: TravelAmericaPage },
      { Pfad: '/Reisen/China', Komponente: TravelChinaPage}
    ]
  },
  {
    Pfad: „/about“, Komponente: AboutPage
  }
];

Beachten Sie, dass die Verschachtelung von untergeordneten Elementen unbegrenzt fortgesetzt werden kann.

Und TravelPage.vue kann folgendermaßen geschrieben werden:

TravelPage.vue

<Vorlage>
  <div id="Reise">
    <h2 class="row1">Reisen</h2>
    <div Klasse="Flex-Container Zeile2">
      <router-link to="/travel/america">Amerika</router-link>
      <router-link to="/travel/china">China</router-link>
    </div>
    <router-view class="row3"></router-view>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: 'Reiseseite'
  }
</Skript>

<Stilbereich>
div {
  Textausrichtung: zentriert;
}

#reisen {
  Anzeige: Raster;
  Rastervorlagenzeilen: 20 % 40 % 40 %;
}

.flex-container {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand herum;
}
</Stil>

Schauen Sie sich localhost:8080 an und Sie werden sehen, dass die Seite „Reisen“ zwei Unterseiten hat! Wenn Sie auf einen der Links klicken, wird unsere URL entsprechend aktualisiert.

Zusammenfassen

Ich hoffe, dieses Tutorial hat Ihnen geholfen, die Verwendung verschachtelter Routen zu verstehen!

Zusätzliche Hinweise zu diesem Thema – wir können Routen mit dynamischen Segmenten definieren, wie z. B. Pfad:‘/Standort/:ID‘. Dann können Sie in den Ansichten dieser Routen auf diese ID als this.$route.params verweisen. Diese Funktion ist nützlich, wenn Sie auf Ihrer Website oder App mehr von einem bestimmten Datentyp (Benutzer, Bilder usw.) anzeigen möchten.

Dies ist das Ende dieses Artikels über verschachteltes Routing im vue.js-Router. Weitere relevante Inhalte zum verschachtelten Routing von vue.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!