Detaillierte Erklärung des VueRouter-Routings

Vue-Router

1. Verstehen Sie das Konzept des Routings

1.1 Was ist Routing?

Die Aktivität des Übertragens von Informationen von einer Quelladresse zu einer Zieladresse über ein vernetztes Netzwerk.

1.2. Backend-Routing-Phase

In den Anfangstagen der Website-Entwicklung wurde die gesamte HTML-Seite vom Server gerendert.
Der Server generiert und rendert die entsprechende HTML-Seite direkt und gibt sie zur Anzeige an den Client zurück.
Aber wie kommt eine Website mit so vielen Seitenservern zurecht?
Eine Seite hat ihre eigene entsprechende Webadresse oder URL.
Die URL wird an den Server gesendet, der die URL mit einem regulären Ausdruck abgleicht und sie schließlich zur Verarbeitung an einen Controller weitergibt.
Der Controller führt verschiedene Verarbeitungsvorgänge durch, generiert schließlich HTML oder Daten und gibt diese an das Front-End zurück.
Damit ist ein IO-Vorgang abgeschlossen.
Bei der obigen Operation handelt es sich um Backend-Routing.
Wenn wir auf unserer Seite unterschiedliche Pfadinhalte anfordern müssen, übergeben wir diese zur Verarbeitung an den Server. Der Server rendert die gesamte Seite und gibt die Seite an den Client zurück. In diesem Fall muss die gerenderte Seite kein JS und CSS separat laden und kann zur Anzeige direkt an den Browser übergeben werden, was auch der SEO-Optimierung förderlich ist.
Nachteile des Backend-Routings:
Eine Situation ist, dass das gesamte Seitenmodul von Backend-Mitarbeitern geschrieben und gepflegt wird.
Eine andere Situation ist, dass ein Front-End-Entwickler, wenn er eine Seite entwickeln möchte, Seitencode in Sprachen wie PHP und Java schreiben muss.
Und normalerweise werden HTML-Code, Daten und entsprechende Logik vermischt, was sehr schwierig zu schreiben und zu pflegen ist.

1.3. Front-End-Routing-Phase

Frontend- und Backend-Trennungsphase:
Mit dem Aufkommen von Ajax gibt es ein Entwicklungsmodell mit Trennung von Front-End und Back-End.
Das Backend stellt nur eine API zum Zurückgeben von Daten bereit, das Frontend erhält die Daten über Ajax und kann die Daten über JavaScript auf der Seite rendern.
Der größte Vorteil dabei sind die klaren Verantwortlichkeiten von Front-End und Back-End. Das Back-End konzentriert sich auf Daten und das Front-End auf Interaktion und Visualisierung.
Und wenn das mobile Endgerät (iOS/Android) erscheint, muss das Backend keine Verarbeitung mehr durchführen und kann weiterhin den vorherigen API-Satz verwenden.
Viele Websites werden immer noch auf diese Weise entwickelt.
Phase der einseitigen Rich-Application:
Tatsächlich besteht das Hauptmerkmal von SPA darin, dass es auf der Grundlage der Trennung von Front-End und Back-End eine Schicht Front-End-Routing hinzufügt.
Das heißt, das Front-End verwaltet einen Satz von Routing-Regeln.
Was ist der Kern des Front-End-Routings?
Die URL wird geändert, die Seite wird jedoch nicht als Ganzes aktualisiert.
Wie erreicht man das?

1.4. Front-End-Rendering und Back-End-Rendering?

Front-End-Rendering : Der Server generiert und rendert die entsprechende HTML-Seite direkt und gibt sie zur Anzeige an den Client zurück. Beispiel: JSP-Seite

Back-End-Rendering : Das Back-End gibt JSON-Daten zurück und das Front-End verwendet eine vorab geschriebene HTML-Vorlage, um die JSON-Daten zu durchlaufen, Zeichenfolgen zu verketten und sie in die Seite einzufügen.

2. Front-End-Routing-Regeln

2.1. URL-Hashing

Ortsbeschreibung

location.href-Effekt aktualisiert die gesamte Seite

location.hash teilweise Aktualisierung statt vollständiger Aktualisierung

2.2. HTML5-Verlaufsmodus

• PushState-Backstackstruktur

Features: First in, last out pushState: in den Stapel schieben back: aus dem Stapel herausspringen

Die Wirkung ist wie folgt

• replaceState zurück

Kein Weg zurück

• gehen

history.go(-1) Gehe einen Schritt zurück
history.go(1) <=> history.forward() Einen Schritt vorwärts gehen

3. Grundlagen der Routenansicht

3.1 Vue-Router verstehen

• vue-router basiert auf Komponenten und Routing

Mithilfe des Routings werden Zugriffspfade festgelegt und Pfade Komponenten zugeordnet.
In einer Einzelseitenanwendung von Vue-Router ist die Änderung des Seitenpfads das Umschalten von Komponenten.

3.2. Vue-Router installieren und verwenden

• Verwenden von Webpack zur Erstellung technischer Entwicklungen
• Installnpm install vue-router --save
• Modularer Einsatz

Importieren Sie das Routing-Objekt und rufen Sie Vue.use(VueRouter) auf.

Erstellen Sie eine Routing-Instanz und übergeben Sie die Routing-Map-Konfiguration

Mounten Sie die erstellte Routing-Instanz in der Vue-Instanz

• Verwenden von Vue-Router-Schritten

Erstellen einer Routing-Komponente

Konfigurieren von Routenzuordnungs-, Komponenten- und Pfadzuordnungsbeziehungen

Über.vue

<Vorlage>
  <div>
    <h2>Ich bin dabei</h2>
    <p>Mir geht es um Inhalte, hehe</p>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Über"
  }
</Skript>

<Stilbereich>

</Stil>

Startseite.vue

<Vorlage>
  <div>
    <h2>Ich bin die Homepage</h2>
    <p>Ich bin der Inhalt der Homepage, hahaha</p>
  </div>
</Vorlage>

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

<Stilbereich>

</Stil>

Router -> index.js

// Ein VueRouter-Objekt erstellen const routes = [
    {
        Weg: '',
        <!--Standardwert für das Routing-->
        // Die Standardseite wird direkt zur Startseiten-Weiterleitung geladen: „/home“
    },
    {
        Pfad: '/home',
        Komponente: Startseite
    },
    {
        Pfad: '/about',
        Komponente: Über
    },
]

const router = neuer VueRouter({
    //Konfiguriere die Anwendungsbeziehung zwischen Routen und Komponentenrouten.
    Modus: „Verlauf“,
    linkActiveClass:"aktiv"
})

• Verwenden Sie Router-Link und Router-View zur Anzeige

<Vorlage>
  <div id="app">
    <router-link to="/home">Zuhause</router-link>
    <router-link to="about">Über</router-link>
    <Router-Ansicht/>
  </div>
</Vorlage>

Allgemeiner Prozess
1. Erstellen Sie ein Vue-Projekt anhand von Anweisungen

vue erstellen vueroutestudy

2. Löschen Sie die standardmäßig generierten Informationen zur HelloWorld-Komponente
3. Erstellen Sie eine Routing-Instanz und übergeben Sie die Routing-Map-Konfiguration

Startseite.vue

<Vorlage>
    <div>
        Ich bin der Inhalt der Homepage</div>
</Vorlage>

index.js

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

// 1. Installieren Sie das Plugin Vue.use(VueRouter) über Vue.use(Plugin-Name)

// 2. Erstellen Sie ein VueRouter-Objekt const routes = [
    {
        Pfad: '/home',
        Komponente: Startseite
    }
]

// 3. Konfigurieren Sie die Zuordnungsbeziehung zwischen Routing und Komponenten const router = new VueRouter({
    Routen
})

// 4. Übergeben Sie das Router-Objekt an die Vue-Instanz. Exportieren Sie den Standardrouter.

Routen verwenden
App.vue

<Vorlage>
  <div id="app">
    <!-- Hyperlink a rendern -->
    <router-link to="/home" tag="button">Zuhause</router-link>
    <router-link to="/about" tag="button">Über</router-link>

    <!-- Dynamische Rendering-Komponente -->
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Komponenten: {},
};
</Skript>

<Stil>
</Stil>

Kurzbeschreibung der Komponenten

<router-link>: Dieses Tag ist eine integrierte Komponente von vue-router und rendert schließlich einen Link <router-view>: Dieses Tag rendert dynamisch andere Inhalte verschiedener Komponenten-Webseiten entsprechend dem aktuellen Pfad, z. B. die Titelnavigation oben oder einige Copyright-Informationen unten. Wenn dieselbe registrierte Route umgeschaltet wird, ist der Schalter die von <router-view> gemountete Komponente, und andere Inhalte ändern sich nicht

Endgültiges Rendering

3.3. Standard-Routingpfad

Wenn Sie die Homepage der Website aufrufen, soll <router-view> standardmäßig den Inhalt der Homepage rendern.
In unserer Implementierung wird die Homepage-Komponente jedoch nicht standardmäßig angezeigt und der Benutzer muss darauf klicken.
Wie kann ich dafür sorgen, dass der Pfad standardmäßig zur Startseite springt und <router-view> die Startseitenkomponente rendert?
Es ist ganz einfach, wir müssen nur noch eine Zuordnung konfigurieren.

Konfigurationsanalyse

Wir haben eine andere Zuordnung in Routen konfiguriert.
Die Pfadkonfiguration ist der Stammpfad: /
Umleitung ist Umleitung, das heißt, wir leiten den Stammpfad auf den Pfad /home um, damit wir das gewünschte Ergebnis erhalten.

3.4. HTML5-Verlaufsmodus

Die Standardseite ist der Hash-Modus der URL

Wenn Sie den Verlauf in HTML5 ändern möchten, können Sie ihn wie folgt konfigurieren

Nach

3.5. Router-Link-Ergänzung

• Tag-Attribut: Mit dem Tag kann angegeben werden, welche Komponente später gerendert werden soll. Beispielsweise wird der obige Code als Element gerendert, anstatt
  

• Ersetzen-Attribut: Ersetzen hinterlässt keinen Verlaufsdatensatz. Wenn Ersetzen angegeben ist, kann die Zurück-Taste nicht zur vorherigen Seite zurückkehren.
  

• Active-Class-Attribut: Wenn die entsprechende Route erfolgreich abgeglichen wurde, wird für das aktuelle Element automatisch eine Router-Link-Active-Klasse festgelegt. Durch Festlegen der Active-Class kann der Standardname geändert werden.

Diese Klasse wird zum Hervorheben des Navigationsmenüs oder der unteren Registerkartenleiste verwendet.
Die Klassenattribute werden jedoch normalerweise nicht geändert und der Standardwert „router-link-active“ wird direkt verwendet.

Sie können diese Methode auch in der index.js der Routing-Konfiguration verwenden

3.6. Routing-Code-Sprung

Quellcode-Implementierung

<Vorlage>
  <div id="app">
    <!-- Hyperlink a rendern -->
    <!-- <router-link to="/home" tag="h1" replace>Startseite</router-link> -->
    <!-- <router-link to="/about" tag="h1" replace active-class>Über</router-link> -->
    <button @click="handleHome">Startseite</button>
    <button @click="handleAbout">Über</button>
    <!-- Dynamische Rendering-Komponente -->
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Komponenten: {},
  Methoden:{
    Startseite
      dies.$router.push('/home')
    },
    handleAbout(){
      dies.$router.push('/about')
    }
  }
};
</Skript>

<Stil></Stil>

Rendern

3.7 Dynamisches Routing

In manchen Fällen ist der Pfad einer Seite möglicherweise nicht klar. Wenn wir beispielsweise die Benutzeroberfläche aufrufen, hoffen wir, den folgenden Pfad zu haben:
/user/aaaa oder /user/bbbb
Neben dem /user am Anfang folgt noch die ID des Benutzers
Diese Übereinstimmungsbeziehung zwischen Pfad und Komponente wird als dynamisches Routing bezeichnet (auch eine Möglichkeit zum Routing von Datenübertragungen).

1. Zuordnung zwischen Konfigurationskomponenten und Pfaden

//Routingbezogene Informationen konfigurierenVue ​​von „vue“ importieren
VueRouter von „vue-router“ importieren

Home aus '../components/Home' importieren
Importieren Sie Info aus '../components/Info'
Benutzer aus '../Komponenten/Benutzer' importieren
// Installieren Sie das Plugin Vue.use(VueRouter) über Vue.use(plugin)

// Ein VueRouter-Objekt erstellen const routes = [
    {
        Weg: '',
        Umleitung: '/home'
    },
    {
        Pfad: '/home',
        Komponente: Startseite
    },
    {
        Pfad: '/about',
        Komponente: Über
    }, 
    <!--Dies ist der Schlüsselcode-->
    {
        Pfad: '/user/:id',
        Komponente: Benutzer
    },
]

const router = neuer VueRouter({
    //Konfiguriere die Anwendungsbeziehung zwischen Routen und Komponentenrouten.
    Modus: "Verlauf",
    linkActiveClass: "aktiv"
})

// Übergeben Sie das Routerobjekt an die Vue-Instanz. Exportieren Sie den Standardrouter.

2. Erstellen Sie die Benutzerkomponente User.vue

<Vorlage>
    <div>
        <h1>Ich bin die APP-Seite</h1>
        {{$route.params.id}}
    </div>
</Vorlage>

3. Anzeige der Startseite
App.vue

    <router-link to="/home/Geek Mouse" >Test zum Abrufen des Benutzernamens</router-link><br>

4. Rendern

4. Lazy Loading von Routen

4.1. Lazy Loading verstehen

Die offizielle Erklärung lautet:
Beim Bündeln Ihrer App kann das JavaScript-Paket sehr groß werden, was sich auf die Seitenladezeit auswirkt.
Wenn wir die Komponenten, die den verschiedenen Routen entsprechen, in verschiedene Codeblöcke aufteilen und dann die entsprechenden Komponenten laden können, wenn auf die Route zugegriffen wird, ist dies effizienter. Wie lautet die offizielle Aussage?
Zunächst wissen wir, dass in der Route normalerweise viele verschiedene Seiten definiert sind.
Wo wird diese Seite schließlich verpackt? Im Allgemeinen wird sie in einer JS-Datei abgelegt.
Wenn jedoch so viele Seiten in eine JS-Datei eingefügt werden, wird die Seite zwangsläufig sehr groß.
Wenn wir diese Seite auf einmal vom Server anfordern, kann dies einige Zeit dauern und der Computer des Benutzers kann sogar für kurze Zeit leer sein.
Wie lässt sich diese Situation vermeiden? Verwenden Sie Lazy Loading von Routen.
Was bewirkt das verzögerte Laden von Routen?
Die Hauptfunktion des Lazy Loading von Routen besteht darin, die den Routen entsprechenden Komponenten in einzelne js-Codeblöcke zu packen.
Erst wenn diese Route aufgerufen wird, wird die entsprechende Komponente geladen

4.2. Lazy-Loading-Effekt

//Routingbezogene Informationen konfigurierenVue ​​von „vue“ importieren
VueRouter von „vue-router“ importieren

const Home = () => import ('../Komponenten/Home')
const Über = () => import ('../Komponenten/Über')
const Benutzer = () => import ('../Komponenten/Benutzer')
// Installieren Sie das Plugin Vue.use(VueRouter) über Vue.use(plugin)

// Ein VueRouter-Objekt erstellen const routes = [
    {
        Weg: '',
        Umleitung: '/home'
    },
    {
        Pfad: '/home',
        Komponente: Startseite
    },
    {
        Pfad: '/about',
        Komponente: Über
    }, {
        Pfad: '/user/:id',
        Komponente: Benutzer
    },
]

const router = neuer VueRouter({
    //Konfiguriere die Anwendungsbeziehung zwischen Routen und Komponentenrouten.
    Modus: "Verlauf",
    linkActiveClass: "aktiv"
})

// Übergeben Sie das Routerobjekt an die Vue-Instanz. Exportieren Sie den Standardrouter.

4.3. Lazy-Loading-Methode

5. Verschachtelte Nutzung von Routen

5.1. Verschachteltes Routing verstehen

Verschachteltes Routing ist eine sehr häufige Funktion. Beispielsweise möchten wir auf der Homepage über /home/news und /home/message auf einige Inhalte zugreifen.
Ein Pfad wird einer Komponente zugeordnet und beim Zugriff auf diese beiden Pfade werden jeweils zwei Komponenten gerendert.

Komponenten- und Pfadbeziehungen

5.2 Implementierungsprozess

1. Erstellen Sie zwei Komponenten: Nachricht und Nachrichten

Nachricht.vue

<Vorlage>
  <div id="about">Neueste Nachrichten</div>
</Vorlage>
<Skript>

</Skript>

Nachrichten.vue

<Vorlage>
  <div id="about">Neuigkeiteninhalt</div>
</Vorlage>
<Skript>

</Skript>

2. Konfigurieren Sie Routing-Informationen hauptsächlich für Unterrouten

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
const Home = () => import('../Komponenten/Home')
const Über = () => import('../components/Über')
const Nachricht = () => import('../Komponenten/Nachricht')
const News = () => import('../Komponenten/News')

// 1. Installieren Sie das Plugin über Vue.use(Plugin-Name) Vue.use(VueRouter);

// 2. Erstellen Sie ein VueRouter-Objekt const routes = [
    {
        Pfad: „/home“,
        Komponente:Home,
        Kinder:[
            {
                Pfad: „Neuigkeiten“,
                Komponente: Nachrichten
            },
            {
                Pfad: „Nachricht“,
                Komponente: Nachricht
            }
        ]
    },
    {
        Pfad: '/home/:Benutzername',
        Komponente: Startseite
    },
    
    {
        Pfad: '/about',
        Komponente: Über
    }
]

// 3. Konfigurieren Sie die Zuordnungsbeziehung zwischen Routing und Komponenten const router = new VueRouter({
    Routen,
    Modus: "Verlauf",
    // linkActiveClass: 'aktiv'
})

// 4. Übergeben Sie das Router-Objekt an die Vue-Instanz. Exportieren Sie den Standardrouter.

3. Übergeordnete Komponente rendert Informationen untergeordneter Komponente

Startseite.vue

<Vorlage>
  <div id="Startseite">
    Ich bin der Inhalt der Startseite<br>

    <router-link to="/home/news"> Neuigkeiten</router-link>
    <router-link to="/home/message"> Nachricht</router-link>
    <Router-Ansicht></Router-Ansicht>
    <!-- <h2>Benutzername: {{ $route.params.username }}</h2> -->
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Home",
};
</Skript>

4. Rendern

5.3. Standardpfad für verschachtelte Routen

umleiten

{
        Pfad: '/user',
        Komponente: Benutzer,
        Kinder: [
            {
                Pfad: "Nachricht",
                Komponente: Nachricht,
            },
            {
                Pfad: 'Neuigkeiten',
                Komponente: Nachrichten,
            },
            // Weiterleitung /user/news
            {
                Weg: '',
                Weiterleitung: 'Neuigkeiten',
            },
        ]
    },

6. Routing-Parameter

Es gibt zwei Haupttypen von übergebenen Parametern: Parameter und Abfrage
Parametertyp

1. Routing-Format konfigurieren: /router/:id

2. Übertragungsmethode: Folgen Sie dem Pfad mit dem entsprechenden Wert

3. Der nach der Übertragung gebildete Pfad: /router/123, /router/abc

Abfragetyp

1. Konfigurieren Sie das Routing-Format: /router, das ist die normale Konfiguration

2. Übertragungsmethode: Wird in Objekten verwendet Als Übermittlungsmethode wird der Abfrageschlüssel verwendet

3. Der nach der Übertragung gebildete Pfad: /router?id=123,/router?id=abc

6.1. Vorbereitung

Einer der übergebenen Parameter: Router-Link

1. Erstellen Sie die Komponente Profile.vue

<Vorlage>
  <div>
    <h2>Ich bin die Profilseite</h2>
    <p>Details meiner Profilseite</p>
    <!--Zeichenfolgeneingabe abrufen, zum Beispiel: /profile/123-->
    <p>$route.params:{{ $route.params }}</p>
    <!--Eingabeparameter für den Objekttyp abrufen, zum Beispiel: /profile?name=1&age=10-->
    <p>$route.query:{{ $route.query }}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Profil",
};
</Skript>

<Stilbereich>
</Stil>

2. Routing konfigurieren

const Profil = () => import('../Komponenten/Profil')
    {
        Pfad: '/profile/:id',
        Komponente: Profil
    }

3. app.vue-Seitenanzeige

 <Router-Link
      :bis="{
        Pfad: '/profile/' + 123,
        Abfrage: { Name: 'Geekmice', Hobby: 'Basketball' }
      }"
      tag="Schaltfläche"
      >Router-Link übergibt Parameter</Router-Link
    >

4. Endgültiger Effekt

Parameterübergabe 2: js-Implementierung

    <button @click="jsTransferParams">js-Übertragungsparameter</button>
   jsTransferParams() {
      dies.$router.push({
        Pfad: "/profile/" + 666,
        Abfrage: { Name: "geekmice", Hobby: "Schwarze Technologie erkunden" },
      });
    },
    
    profile.vue erhält Parameter <p>$route.params:{{ $route.params }}</p>
    <p>$route.query:{{ $route.query }}</p>

6.2. Parameter abrufen

Holen Sie sich die Parameter über das $route-Objekt.

In einer Anwendung, die einen Vue-Router verwendet, wird das Routing-Objekt in jede Komponente eingefügt und dieser.$route zugewiesen. Beim Wechseln der Route wird das Routing-Objekt aktualisiert.
Die von $route übergebenen Informationen lauten wie folgt

6.3. Der Unterschied zwischen Router und Route

Einfach ausgedrückt wird einer davon zum Abrufen von Routing-Informationen und der andere zum Ausführen des Routings verwendet.

$router ist eine VueRouter-Instanz. Wenn Sie zu einer anderen URL navigieren möchten, verwenden Sie die Methode $router.push, um die Sprungmethode, Hook-Funktion usw. zu routen.

$route ist das aktuelle Router-Umleitungsobjekt, das Name, Metadaten, Pfad, Hash, Abfrage, Parameter, vollständigen Pfad, Übereinstimmungen, Umleitung von usw. abrufen kann.

7. Routing-Navigationswächter

Der vom Vue-Router bereitgestellte Navigationsschutz wird hauptsächlich zur Überwachung des Ein- und Ausstiegs der Route verwendet
vue-router stellt die Hook-Funktionen beforeEach und afterEach bereit, die vor und nach der Routenänderung ausgelöst werden.

Verwenden Sie beforeEach, um die Titeländerung abzuschließen

• Zunächst können wir einige Titel im Hook definieren, die mit meta definiert werden können
• Zweitens verwenden Sie den Navigationsschutz, um unseren Titel zu ändern

//Routingbezogene Informationen konfigurierenVue ​​von „vue“ importieren
VueRouter von „vue-router“ importieren

const Home = () => import('../Komponenten/Home')
const Über = () => import('../components/Über')
const Benutzer = () => import('../Komponenten/Benutzer')
const Nachricht = () => import('../Komponenten/Nachricht')
const News = () => import('../Komponenten/News')
const Profil = () => import('../Komponenten/Profil')

// Installieren Sie das Plugin Vue.use(VueRouter) über Vue.use(plugin)

// Ein VueRouter-Objekt erstellen const routes = [
    {
        Weg: '',
        Umleitung: '/home'
    },
    {
        Pfad: '/home',
        Komponente: Home,
        Meta: {
            Titel: "Zuhause"
        }
    },
    {
        Pfad: '/profile/:id',
        Komponente: Profil,
        Meta: {
            Titel: "Archive"
        }
    },
    {
        Pfad: '/about',
        Komponente: Über,
        Meta: {
            Titel: "Über"
        }
    }, {
        Pfad: '/user',
        Komponente: Benutzer,
        Kinder: [
            {
                Pfad: "Nachricht",
                Komponente: Nachricht,
            },
            {
                Pfad: 'Neuigkeiten',
                Komponente: Nachrichten,
            },
            {
                Weg: '',
                Weiterleitung: 'Neuigkeiten',
            },
        ]
    },
]

const router = neuer VueRouter({
    //Konfiguriere die Anwendungsbeziehung zwischen Routen und Komponentenrouten.
    Modus: "Verlauf",
    linkActiveClass: "aktiv"
})

router.afterEach((bis, von, weiter) => {
    Dokument.Titel = to.matched[0].meta.title;
    nächste()
})

// Übergeben Sie das Routerobjekt an die Vue-Instanz. Exportieren Sie den Standardrouter.

Rendern

Kurzbeschreibung

Analyse von drei Parametern des Navigations-Hooks

• to: Das Routingobjekt des einzutragenden Ziels
• von: Das Routenobjekt, das die aktuelle Navigation gerade verlässt
• Nach dem Aufruf dieser Methode können Sie den nächsten Hook eingeben

8. Keep-Alive-Protokoll

Diese Komponente ist eine integrierte Komponente von Vue, die den Status während des Komponentenwechsels im Speicher behalten kann, um wiederholtes Rendern von DOM zu verhindern.
Fallerklärung zum Verständnis

Voraussetzung: Es gibt zwei Komponenten, KeepStart und KeepEnd. Die KeepStart-Komponente verfügt über ein Eingabefeld und die Eingabeinformationen können zwischengespeichert werden. Die KeepEnd-Komponente kann nicht zwischengespeichert werden.

Quellcode-Implementierung
1.KeepStart.vue

<Vorlage>
    <div>
        <h1>Startseite</h1>
        <input type="text" placeholder="Bitte geben Sie ein..."">
    </div>
</Vorlage>

2. KeepEnd.vue

<Vorlage>
    <div>
        <h1>Keine Notwendigkeit, Seiten im Cache zu speichern</h1>
        <input type="text" placeholder="Bitte eingeben">
    </div>
</Vorlage>

3. router->index.js

const KeepStart = () => import('../components/KeepStart')
const KeepEnd = () => import('../components/KeepEnd')
  {
        Pfad: '/keepStart',
        Komponente: KeepStart,
        Name:'keepStart',
        Meta: {
            keepAlive: wahr
        }
    },
    {
        Pfad: '/keepEnd',
        Name:'keepEnd',
        Komponente: KeepEnd,
        Meta: {
            keepAlive: false
        }
    }

4. App.vue

    <router-link to="/keepStart" tag="button">Keepstart-Seite</router-link>
    <router-link to="/keepEnd" tag="button">Seite behalten</router-link>
    <!-- Dynamische Rendering-Komponente -->
    <!-- <Router-Ansicht></Router-Ansicht> -->
    <am Leben erhalten>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </am Leben erhalten>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

Rendern

9. TabBar-Übung

9.1. Anforderungserklärung

Rendern

Beschreibung <br /> Implementieren Sie eine Navigationsleiste mit vier Spalten: Kategorie, Home, Warenkorb und Mein. Benutzer klicken auf jede Spalte, um verschiedene Seiten anzuzeigen. Verwenden Sie die Idee der Slots, um Skalierbarkeit zu erreichen.

9.2 Bedarfsanalyse

• 1. Wenn unten eine separate TabBar-Komponente vorhanden ist, wie wird sie installiert?

Passen Sie die TabBar-Komponente an und verwenden Sie sie in der App

Platzieren Sie die Tabbar unten und legen Sie die entsprechenden Stile fest

• 2. Der in der TabBar angezeigte Inhalt wird extern bestimmt

Definieren von Slots

Flex-Layout-Bewertung TabBar

• 3. Passen Sie TabBarItem an, Sie können Bilder und Text einfügen

Definieren Sie TabBarItem und definieren Sie zwei Slots: Bild und Text

Geben Sie den beiden Slots ein äußeres Wrapper-Div für das Styling

Füllen Sie den Schlitz, um den Effekt der unteren TabBar zu erzielen

• 4. Übergeben Sie das ausgewählte markierte Bild

Definieren Sie einen weiteren Steckplatz, um die Daten des aktiven Symbols einzufügen

Definieren Sie eine Variable isActive und verwenden Sie v-show, um zu entscheiden, ob das entsprechende Symbol angezeigt werden soll

• 5. TabBarItem bindet Routingdaten

Routing installieren npm install vue-router --save

Vervollständigen Sie router->index.js und erstellen Sie die entsprechenden Komponenten

main.js registriert Router

App.vue fügt Router-View-Komponenten-Rendering hinzu

• 6. Klicken Sie auf das Element, um zur entsprechenden Routing-Tabelle zu springen und dynamisch isActive festzulegen

Hören Sie auf Elementklicks und ersetzen Sie den Routingpfad durch this.$router.replace()

Verwenden Sie this.$route.path.indexOf(this.link) !== -1, um zu bestimmen, ob es aktiv ist

• 7. Aktive Stile dynamisch berechnen

Kapseln Sie die neue berechnete Eigenschaft this.isActive ? {'color':'red'}:{}

9.3. Realisierung der Nachfrage

Implementierungsversion 1

Erstellen eines Vue-Projekts

vue erstellt Navigationsleiste

Löschen Sie nutzlose Komponenten HelloWorld Image

Einfache Verzeichnisstruktur

App.vue

<Vorlage>
  <div id="app">
    <div id="Tabulatorleiste">
      <div id="tab-bar-item">Startseite</div>
      <div id="tab-bar-item">Kategorie</div>
      <div id="tab-bar-item">Warenkorb</div>
      <div id="tab-bar-item">Mein</div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Komponenten: {},
};
</Skript>

<Stil>
/* CSS-Stil importieren */
@import url("./assets/css/base.css");

#Tab-Leiste {
  Anzeige: Flex;
  Hintergrundfarbe: rgb(246, 246, 246);

  /* Absolute Positionierung */
  Position: fest;
  links: 0;
  unten: 0;
  rechts: 0;
}

#Tab-Leistenelement {
  biegen: 1;
  Textausrichtung: zentriert;
  Höhe: 49px;


}
</Stil>

base.css

Körper{
    Polsterung: 0;
    Rand: 0;
}

Rendern

Endgültige Version <br /> Verzeichnisstruktur

Wichtige Quellcode-Implementierung

TabBar.vue-Paket

<Vorlage>
  <div id="Tabulatorleiste">
    <Steckplatz></Steckplatz>
  </div>
</Vorlage>

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

<Stilbereich>
  #Tab-Leiste {
    Anzeige: Flex;
    Hintergrundfarbe: #f6f6f6;

    Position: fest;
    links: 0;
    rechts: 0;
    unten: 0;

    Kastenschatten: 0 -1px 1px rgba(100,100,100,.2);
  }
</Stil>

TabBarItem.vue-Paket

<Vorlage>
  <!--Alle Elemente zeigen dasselbe Bild und denselben Text an-->
  <div Klasse="Tab-Leiste-Element" @click="itemClick">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "TabBarItem",
    Requisiten: {
      Pfad: String,
      aktiveFarbe: {
        Typ: Zeichenfolge,
        Standard: „rot“
      }
    },
    Daten() {
      zurückkehren {
        // ist aktiv: true
      }
    },
    berechnet: {
      istAktiv() {
        // /home -> Element1(/home) = wahr
        // /home->item1(/Kategorie) = falsch
        // /home->item1(/cart) = wahr
        // /home->item1(/profile) = wahr
        gib dies zurück.$route.path.indexOf(this.path) !== -1
      },
      aktiverStil() {
        gib dies zurück.isActive ? {Farbe: this.activeColor} : {}
      }
    },
    Methoden: {
      itemClick() {
        dies.$router.replace(dieser.pfad)
      }
    }
  }
</Skript>

<Stilbereich>
  .tab-bar-item {
    biegen: 1;
    Textausrichtung: zentriert;
    Höhe: 49px;
    Schriftgröße: 14px;
  }

  .tab-bar-item img {
    Breite: 24px;
    Höhe: 24px;
    Rand oben: 3px;
    vertikale Ausrichtung: Mitte;
    Rand unten: 2px;
  }
</Stil>

Konfigurieren Sie das Routing index.js

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren

const Home = () => import('../views/home/Home')
const Kategorie = () => import('../views/category/Kategorie')
const Warenkorb = () => import('../views/cart/Warenkorb')
const Profil = () => import('../views/profile/Profil')

// 1. Installieren Sie das Plugin Vue.use(VueRouter)

// 2. Erstelle ein Routing-Objekt const routes = [
  {
    Weg: '',
    Umleitung: '/home'
  },
  {
    Pfad: '/home',
    Komponente: Startseite
  },
  {
    Pfad: '/Kategorie',
    Komponente: Kategorie
  },
  {
    Pfad: '/cart',
    Komponente: Warenkorb
  },
  {
    Pfad: '/Profil',
    Komponente: Profil
  }
]
const router = neuer VueRouter({
  Routen,
  Modus: „Verlauf“
})

// 3. Router exportieren
Standardrouter exportieren

Endergebnis

Dies ist das Ende dieses Artikels über VueRouter-Routing. Weitere relevante Inhalte zum VueRouter-Routing 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!