vue.js vue-router verbessert die Benutzererfahrung

Dieses Mal präsentiere ich Ihnen den Vue-Router von vue.js, um die Benutzererfahrung zu verbessern. Welche Vorsichtsmaßnahmen können Sie verwenden, um die Benutzererfahrung zu verbessern? ein Blick.

Vorwort

Jeder weiß, dass der Beamte für Single-Page-Anwendungen einen Vue-Router zur Verarbeitung von Routing -Sprüngen bereitstellt. Kürzlich arbeite ich an einem SPA, der auf Vue-Router basiert, und möchte die ungültige Routing-Seite (404) vereinheitlichen . bewältigen.

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

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

Nach meinem Verständnis stimmt der Vue-Router mit der registrierten Route überein. Wenn er übereinstimmt, wird die entsprechende Komponente geladen. Wenn er nicht übereinstimmt, wird die entsprechende Router-Ansicht zurückgesetzt (oder gelöscht).

Wenn wir es daher nicht verarbeiten, 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 watch die Routenänderungen überwachen. Die Überwachung aller Routenänderungen erfolgt 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

Bedingtes Rendern kann verwendet werden. Wenn die Route gültig ist, wird die Router-Ansicht gerendert. Wenn die Route 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: 'App',
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

Wie freundlich 404 ist, liegt bei Ihnen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der mobilen Komponentenbibliothek Cube-UI

So rufen Sie den WeChat auf Freigabefunktion in nodejs

Das obige ist der detaillierte Inhalt vonvue.js vue-router verbessert die Benutzererfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!