So implementieren Sie ungültige Routing-Eingabeaufforderungen über vue-router in vue.js

Wie wir alle wissen, ist vue-router das offizielle Routing-Plugin von Vue.js. Es ist tief in vue.js integriert und eignet sich hauptsächlich zum Erstellen von Einzelseitenanwendungen. Freunde, die Informationen zum Implementieren ungültiger Routing-Eingabeaufforderungen (404) benötigen, können darauf verweisen.

Vorwort

Jeder weiß, dass der Beamte für Single-Page-Anwendungen einen Vue-Router für die Routing-Jump-Verarbeitung bereitstellt, und seit kurzem ist dies auch der Fall Ein auf Vue-Router basierender SPA möchte ungültige Routing-Seiten (404) einheitlich behandeln.

Dieses Mal habe ich wirklich keine konkreten Anweisungen in den offiziellen Dokumenten gefunden [Gesichtsbedeckung]

Dieser Artikel ist also nur eine Idee meines Heimwerkens, bitte verzeihen Sie mir =_=

Nach meinem Verständnis passt der Vue-Router die registrierte Route entsprechend dem Pfad an. Wenn sie übereinstimmt, wird die entsprechende Komponente geladen. Wenn sie nicht übereinstimmt, wird die entsprechende Router-Ansicht zurückgesetzt (oder gelöscht).

Wenn wir also keine Verarbeitung durchführen, ist die letzte Seite leer.

Können wir also viel Aufhebens um die Routenanpassung machen?

Routenüberwachung

In der Komponente können Sie die aktuelle Route von this.$route abrufen und dann mit der Uhr Routenänderungen überwachen , überwachen Alle Routing-Änderungen fallen natürlich auf die Root-Routing-Komponente (z. B. App.vue).

Ungültige Routenerkennung

$route.matched enthält das Übereinstimmungsergebnis der aktuellen Route. Wenn es leer ist, ist die aktuelle Route ungültig .

Schnittstellenaufforderung

Sie können bedingtes Rendern verwenden. Wenn die Route gültig ist, wird die Router-Ansicht gerendert ungültig ist, wird die Eingabeaufforderungsnachricht gerendert.

Demo

App.vue

<template>
 <p v-if="invalidRoute">404</p>
 <router-view v-else></router-view>
</template>
<script type="text/babel">
 export default {
 name: &#39;App&#39;,
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

Das Obige habe ich für alle zusammengestellt, Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zum Zusammenführen von Objektwerten in JavaScript

So implementieren Sie die Überprüfung in Angular

So implementieren Sie die Tabellensortierung in Angular

Informationen zur Verwendung von Localstorage und Sessionstorage in Vue

Wie funktioniert das? jackson parse json string

So lesen Sie lokale Dateien in js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ungültige Routing-Eingabeaufforderungen über vue-router in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!