Vue Learning - Grundlagen des VueRouter-Routings

1. VueRouter

1. Beschreibung

Das Erstellen von Single-Page-Anwendungen mit Vue.js + Vue Router ist ganz natürlich: Mit Vue.js können wir bereits Anwendungen durch die Kombination von Komponenten zusammenstellen. Wenn Sie Vue Router hinzufügen möchten, müssen Sie lediglich components routes zuordnen und Vue Router 在dann mitteilen, wo sie gerendert werden sollen. Routen sind im Wesentlichen Hyperlinks.

2. Darstellung der ausgewählten Route:

(1) Router-Link-Exact-Active-Klasse

Beim Routing zu einem bestimmten Ort wird der Klassenname dem entsprechenden Routing-Tag hinzugefügt.
Beispiel: Wenn Sie auf „Info“ klicken, springt die Route zur entsprechenden Seite.

(2) Router-Link-Active-Klasse

Beim Routing umfasst die Pfadeinstellung der untergeordneten Route (z. B.: http://localhost/home) die Pfadeinstellung der übergeordneten Route (z. B.: http://localhost/). Wenn dann auf die untergeordnete Route geklickt wird und router-link-active zur untergeordneten Route hinzugefügt wird, verfügt die übergeordnete Route auch über router-link-active . Das heißt, wenn Sie auf die Route (http://localhost/home) klicken, werden beide Routen ausgewählt.

3. Grundlegendes Funktionsprinzip

Führen Sie im HTML-Teil von vue einen Router-Link ein (ähnlich dem Prinzip von a). Das „to“-Attribut ist die Vue-Komponente, zu der gesprungen werden soll, und router-view ist für die Anzeige des Inhalts verantwortlich, auf den die aktuelle Route zeigt, sodass auch eine einzelne Seite den Effekt eines Seitensprungs erzielen kann!

2. Tatsächlicher Kampf

1. Erstellen Sie ein Vue-Projekt mit Router

2. Öffnen Sie die Datei src/router/index.js im Projekt

Sie können sehen, dass das Projekt automatisch zwei Routen generiert hat, eine ist die home und die andere about -Schnittstelle. Die Pfade sind jeweils '/' und '/about' .

Öffnen Sie main.js im Stammverzeichnis. Sie sehen, dass in main.js Routing eingeführt wurde, sodass Routing in allen Komponenten verwendet werden kann.

3. Öffnen Sie das Projekt im Browser

Sie können zwei Routennavigationen sehen: Home und About “.

4. Neue Route erstellen

Schreiben Sie eine Routennavigation ähnlich wie Taobao, bestehend aus vier Teilen: Startseite, Nachricht, Einkaufswagen und Ich.

Erstellen Sie vier neue Vue-Dateien, die vier Routen entsprechen.

Konfigurieren der Routing-Datei „index.js“

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Home aus '../views/Home.vue' importieren

Vue.use(VueRouter)

const Routen = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: Startseite
  },
  {
    Pfad: '/Nachricht',
    Name: 'Nachricht',
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Message.vue')
  },
  {
    Pfad: '/goodcar',
    Name: 'GoodCar',
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/GoodCar.vue')
  },
  {
    Pfad: '/me',
    Name: „Ich“,
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Me.vue')
  }
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Konfigurieren Sie die Navigationsleiste in App.vue

<Vorlage>
  <div id="app">
    <div id="nav">
      <router-link to="/">Zuhause</router-link>
      <router-link to="/message">Nachricht</router-link>
      <router-link to="/goodcar">Warenkorb</router-link>
      <router-link to="/me">Mein</router-link>
    </div>
    <Router-Ansicht/>
  </div>
</Vorlage>

<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
}

#nav {
  Polsterung: 30px;
  Rand: 0 automatisch;
  Breite: 30%;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand herum;
}

#nav ein {
  Schriftstärke: fett;
  Farbe: #2c3e50;
  Textdekoration: keine;
}

#nav a.router-link-exact-active {
  Farbe: #42b983;
}
</Stil>

Ergebnis:

Wir verstehen also das Grundkonzept des Routings sowie seine Konfiguration und seine Funktionen.

Dies ist das Ende dieses Artikels über Vue Learning – Grundlagen des VueRouter-Routings. Weitere relevante Inhalte zu den Grundlagen des VueRouter-Routings 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!