Tiefgreifendes Verständnis der Vue-cli4-Routing-Konfiguration

Vorwort - Vue Routing

Vue-Router ist das offizielle Routing-Plugin für Vue und tief in Vue.js integriert.
In einer Einzelseitenanwendung, die Vue-Router verwendet, führt die Änderung der URL zum Wechseln der Komponenten, wodurch der Effekt eines Seitenwechsels erzielt wird. Daher sind die beiden Hauptprobleme bei der Konfiguration von Vue-Router, wie die URL nach Wunsch geändert werden kann und wohin die Seite nach der URL-Änderung geht.

[SPA-Webseite] Front-End-Rendering ermöglicht die Implementierung einseitiger Rich Application SPA-Seiten. Die gesamte Webseite besteht nur aus einer HTML-Seite und der statische Ressourcenserver verfügt nur über einen Satz HTML und CSS oder sogar nur einen Satz JS.

[Rich Application] wird durch Senden einer neuen Anforderungs-URL an den Server realisiert. Nachdem Ressourcen vom Server abgerufen wurden, ist der Front-End-Router für die Zuweisung von Ressourcen zu den entsprechenden Komponenten der Seite verantwortlich.

Die Implementierung von [Einzelseite] erfordert eine Änderung der URL am Front-End. Nachdem das Front-End-Routing angezeigt wurde, findet das Front-End-Routing den Teil, der gemäß der Überwachung des Routers aus der Zuordnungsbeziehung geändert werden muss, extrahiert und weist neue Ressourcen zu und rendert nur den Teil erneut, der geändert werden muss.

1. Die grundlegendste Routing-Konfiguration

Zuerst müssen Sie den Vue-Router installieren. Ich werde Ihnen nicht sagen, wie das geht …
Nachdem wir vue-router erfolgreich installiert haben, wird in der Quelle der Projektdatei ein Ordner „router“ angezeigt. In diesem Ordner befindet sich eine Datei „index.js“, und die Konfiguration des Routers wird hier im Wesentlichen abgeschlossen.

Öffnen Sie es und konfigurieren Sie es im Array „Routen“. Die Routen einer Seite werden in diesem Array in einem Objekt gruppiert, das Eigenschaften wie Pfad und Komponente enthält, die angeben, wie die URL auf Änderungen reagiert.

1. Router/index.js konfigurieren

//Dies ist in router/index.js, alles;
importiere { createRouter, createWebHistory } von 'vue-router'
Home aus '../views/Home.vue' importieren

const Routen = [
   //Routing hier konfigurieren;
]
//Verwenden Sie createRouter anstelle von new VueRouter in Router4;
const router = createRouter({ 
  Verlauf: createWebHistory(process.env.BASE_URL),
  Routen
  //Stellen Sie hier die Routing-Konfigurations-Array-Routen aller Seiten vor;
})

Standardrouter exportieren   
//Exportieren Sie das Router-Objekt, das alle Routing-Konfigurationen enthält,
//In main.js für globale Verwendung eingefügt;

Komponentenattribut: Der Wert ist eine Seite. Dieses Seitensteuerelement muss im Voraus eingeführt werden.

Pfadattribut: Gibt an, was in der URL angezeigt wird, um zur Seite zu springen, die dem Komponentenattribut entspricht.

//Dies steht in router/index.js, das Ende wird weggelassen;
importiere { createRouter, createWebHistory } von 'vue-router'
Home aus '../views/Home.vue' importieren
Importieren Sie „Info“ aus „../views/About.vue“.
Nachrichten aus „../views/News.vue“ importieren
//3 Seitensteuerelemente einführen;
const Routen = [
    {
        Pfad: '/', /* gibt die Seite an, die der ursprünglichen URL entspricht*/
        Name: "Home",
        Komponente: Home /* Gibt die Standard-Homepage an*/
   },
   {
        Pfad: '/about', /* gibt die URL an, zu der gesprungen werden soll, wenn das neue Segment /about*/ ist.
        Name: 'Über',
        Komponente: Info /* Springe zu Info */
   },
   {
        Pfad: '/news', /* Gibt an, dass die URL umgeleitet wird, wenn das neue Segment /news*/ ist.
        Name: "Neuigkeiten",
        Komponente: News /* Zu News springen */
   },
]

2. App.vue konfigurieren

Wir haben bereits angegeben, wie umgeleitet werden soll, wenn sich die URL in andere Zeichen ändert. Jetzt müssen wir uns überlegen, wie wir die URL auf unsere Weise ändern können.
Da nur App.vue gerendert wird und jeder am Anfang nur App.vue sieht und bedient, können unsere Regeln zum Ändern der URL nur hier festgelegt werden.

Lernen Sie zwei neue Tags kennen, die weltweit registriert wurden.

  <router-link to="Der URL hinzuzufügende Zeichen">XXX</router-link>
  //<Router-Link> wird als <a> gerendert;
  <Router-Ansicht />
  //Diese beiden müssen in Kombination verwendet werden;

Alle Seitensprünge in App.vue werden durch <router-link> gesteuert, indem die URL geändert wird.

<router-view> ist ein Platzhaltertag, der angibt, wo das Router-Link-Tag angezeigt werden soll.
Wenn Sie es löschen, wird der Router-Link jedenfalls nicht angezeigt (das ist nicht wichtig, lassen Sie uns zuerst über das Routing sprechen ...).

<!-- Dies ist in App.vue -->
<Vorlage>
  <div id="nav">
  <!-- Das to-Attribut gibt an, wie die URL geändert werden soll; -->
  <!-- Das Tag-Attribut gibt an, in welches HTML-Element das Router-Link-Tag gerendert werden muss; -->
    <router-link to="/" Tag="a">Homepage</router-link> |
    <router-link to="/about" Tag="a">Info-Seite</router-link> |
    <router-link to="/news" Tag="a">Neuigkeitenseite</router-link> |
    <router-link to="/login" Tag="a">Anmelden</router-link>
  </div>
  <Router-Ansicht />
</Vorlage>

Dann können Sie Ihr Projekt npm run serve ausführen, um es zu sehen;

Sie können sehen, dass es laut Tag-Attribut noch 4 weitere Tags gibt. Klicken wir auf „Neuigkeiten“, um sie anzuzeigen.

Die URL ändert sich entsprechend dem Wert des „to“-Attributs des Router-Links und die Seite springt korrekt.
An diesem Punkt ist die grundlegende Routing-Konfiguration abgeschlossen.

2. Routing-Lazy-Loading-Technologie

Es ist effizienter, die Komponenten, die den verschiedenen Routen entsprechen, zu trennen und die entsprechenden Komponenten nur zu laden, wenn eine bestimmte Route ausgelöst wird. Mit Ausnahme von Drittanbieter-, zugrunde liegender Unterstützung und öffentlichen Apps befinden sich andere Vue-Seitenkomponenten auf dem Server und können jederzeit angefordert werden, um minimale Auswirkungen auf die Seite sicherzustellen.

Tatsächlich geht es nur darum, die Art und Weise zu ändern, wie die einzelnen Komponenten in router/index.js eingeführt werden …
Dies geschieht mithilfe der Pfeilfunktionsmethode.

const Routen = [
  {
    Pfad: '/about',
    Name: 'Über',
    Komponente: () => import('../views/About.vue')
    //Info wird hier direkt eingeführt und der Komponente zugewiesen;
  },
  {
    Pfad: '/news',
    Name: "Neuigkeiten",
    Komponente: () => import("../views/News.vue")
        //Info wird hier direkt eingeführt und der Komponente zugewiesen;
  },
  {
    Pfad: '/login',
    Name: 'Login',
    Komponente: () => import('../views/Login.vue')
        //Info wird hier direkt eingeführt und der Komponente zugewiesen;
  },
]

3. Verschachtelte Routen

Wir können doch nicht auf unseren Unterseiten keine Links haben, oder? Wenn Benutzer über App.vue eine Unterseite aufrufen, sollten untergeordnete Links vorhanden sein, die sie zu anderen Seiten führen. Dafür ist Routing-Nesting-Technologie erforderlich.

Einfach ausgedrückt bedeutet dies, dass die Route der untergeordneten Seite in der Route der übergeordneten Seite angegeben wird. Geben Sie beispielsweise die Route von NewsChild-1.vue in der Route von News.vue an.

//Dies ist die reduzierte Datei router/index.js;
const Routen = [
  {
    Pfad: '/news',
    Name: "Neuigkeiten",
    Komponente: () => import("../views/News.vue"),
    Kinder: [
      {
        Pfad: 'NewsChild-1', 
        //Unterrouten müssen nicht mit einem "/" und dem Pfad der vorherigen Ebene beginnen.
        //Aber tatsächlich wird die Analyse hinzugefügt;
        //Wenn die angegebene URL erscheint /News/NewsChild-1,
        //Zur Seite springen, die der Komponente entspricht;
        Komponente: () => import("../views/NewsChild-1"),
      }
    ]
  },
]

Hiermit geben Sie die Aktionen an, die ausgeführt werden sollen, wenn sich die URL der News-Seite ändert.
Natürlich müssen wir auch angeben, wie die URL auf der News-Seite geändert werden soll und dazu News.vue eingeben.

<!-- Dies ist News.vue; -->
<Vorlage>
  <h1>Neuigkeiten</h1>
  //Geben Sie an, dass die URL bei Auslösung um /News/NewsChild-1 erhöht wird.
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <Router-Ansicht></Router-Ansicht>
</Vorlage>

Schauen Sie sich dann die gerenderte Seite an:

Klicken Sie auf den Link NewsChild-1:

Die URL wird zu /News/NewsChild-1, basierend auf dem Wert des „to“-Attributs des Router-Links.
Sie können weitere Seitenkomponenten im untergeordneten Array verschachteln und dasselbe tun.

4. Dynamisches Routing

Wohin die Seite gesprungen werden soll, kann unser Programm oftmals nicht bestimmen. Hier muss das Programm je nach Bedarf selbst entscheiden, damit die Route dynamisch geändert werden kann.

1. Dynamische Routing-Konfiguration

Einfach ausgedrückt müssen wir [URL, die hinzugefügt werden soll] und [URL, die über den Pfad umgeleitet werden soll] nicht fest codieren, sondern verwenden v-bind, um die Teile der URL, die sich häufig ändern müssen, mit den Daten im Exportstandard zu verbinden, sodass sich die URL mit den Daten ändert.

//Dies steht in router/index.js
importiere { createRouter, createWebHashHistory } von „vue-router“;

const Routen = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: () => import('../views/Home.vue'),
  },
  {
  //Wir sollten den Pfadwert hier nicht fest codieren;
    Pfad: '/user/:userId',
    Name: 'Benutzer',
    Komponente: () => import('../views/User.vue'),
  }
];

<!-- Dies ist in App.vue-->
<Vorlage>
  <div id="app">
    <router-link to="/">Zuhause</router-link> |
    <router-link to="/about">Über</router-link> |
    <!-- Verwenden Sie hier v-bind, um die Benutzer-ID-Daten aufzurufen; -->
    <!-- Verkette /user/ als String mit userId -->
    <router-link v-bind:to="'/user/' + userId">Benutzer</router-link>
  </div>
  <Router-Ansicht />
</Vorlage>
<Skript>
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
    //Setzen Sie hier die Benutzer-ID-Daten auf Baixia.
      Benutzer-ID: "baixia",
    };
  },
};
</Skript>

Schauen wir uns die Wirkung an:

Klicken Sie anschließend auf Benutzer:

Die URL verkettet die Benutzer-ID erfolgreich in den Daten, nämlich baixia.

2. Dynamische Routing-Parameter

Dynamisches Routing ist auch eine der Möglichkeiten, wie Vue Daten überträgt. Dabei wird $route zur Kommunikation zwischen Vue-Seitenkomponenten (d. h. Vue-Dateien) verwendet.
Lassen Sie uns zunächst zwei Variablen kennenlernen:
$router : Das von createRouter am Ende von index.js erstellte Routing-Objekt.
$route : Das aktuell aktive Routenobjekt, das über ein Params-Attribut und vollständige Namensparameter verfügt, die verwendet werden können, um den in unserer URL mit v-bind übergebenen Wert abzurufen.

Beispielsweise muss User.vue die Benutzer-ID-Daten in den Daten von App.vue abrufen:

<!-- In App.vue (Absender) -->
<Vorlage>
  <div id="app">
    <router-link v-bind:to="'/user/' + userId">Benutzer</router-link>
  </div>
  <Router-Ansicht />
</Vorlage>
<Skript>
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      Benutzer-ID: "baixia",
    };
  },
};
</Skript>

//In user.vue (Empfänger)
Standard exportieren {
    Name: "Benutzer",
    berechnet: {
        Benutzer-ID() {
            gib dies zurück.$router.params.userId
//Der Wert von this.$router.param.userId,
//Das heißt, es wird die vom Router-Link von App.vue übergebene Benutzer-ID zurückgegeben.
//Wird als Wert des berechneten Attributs userID() verwendet}
    }
}

Die in User.vue zum Abrufen von Benutzerinformationen verwendeten Parameter hängen vom Pfad in index.js ab. Wenn path:'/user/:abc', sollte das <script> in User.vue wie folgt lauten:

Standard exportieren {
    Name: "Benutzer",
        berechnet: {
            Benutzer-ID() {
            //Hier sollte auch das abc-Attribut abgerufen werden;
                gib dies zurück.$router.params.abc
           }
        }
}

Zusammenfassen

Ich habe gestern die Benachrichtigung erhalten, dass ich den ersten Preis im HTML5-Designwettbewerb gewonnen habe ...
Das ist ziemlich unverschämt. Ich denke, das ist ziemlich normal. Ich muss in den nächsten Tagen den Fortschritt von Vue verfolgen.

Dies ist das Ende dieses Artikels über ein vertieftes Verständnis der Vue-cli4-Routingkonfiguration. Weitere relevante Inhalte zur Vue-cli4-Routingkonfiguration 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!