Comment implémenter des invites de routage non valides via vue-router dans vue.js

Comme nous le savons tous, vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à vue.js et convient à la création d'applications d'une seule page. L'article suivant vous présente principalement vue-. dans vue.js. Les amis qui ont besoin d'informations sur la façon d'implémenter des invites conviviales de routage invalide (404) peuvent s'y référer.

Avant-propos

Tout le monde sait que pour les applications d'une seule page, le responsable fournit vue-router pour le traitement des sauts de routage, et récemment il le fait Un SPA basé sur vue-router souhaite gérer uniformément les pages de routage (404) non valides.

Cette fois, je n'ai vraiment pas trouvé d'instructions précises dans les documents officiels [couvre-visage]

Donc cet article n'est qu'une idée de mon DIY, s'il te plaît, pardonne-moi =_=

D'après ma compréhension, vue-router fait correspondre la route enregistrée en fonction du chemin. S'il correspond, il charge le composant correspondant. S'il ne correspond pas, il réinitialise (ou efface) la vue du routeur correspondante.

Donc, si nous n’effectuons aucun traitement, la dernière page sera vierge.

Alors, peut-on faire toute une histoire sur la correspondance d'itinéraire ?

Surveillance d'itinéraire

Dans le composant, vous pouvez obtenir l'itinéraire actuel à partir de this.$route, puis vous pouvez utiliser la montre pour surveiller les changements d'itinéraire , surveillez Toutes les modifications de routage relèvent naturellement du composant de routage racine (tel que App.vue).

Détection d'itinéraire invalide

$route.matched contient le résultat correspondant de l'itinéraire actuel. S'il est vide, l'itinéraire actuel est invalide. .

Invite d'interface

Vous pouvez utiliser le rendu conditionnel Si l'itinéraire est valide, la vue du routeur sera rendue, et si l'itinéraire est valide. n'est pas valide, le message d'invite sera affiché.

Démo

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>

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

À propos de la fusion des valeurs d'objet en JavaScript

Comment implémenter la vérification dans Angular

Comment implémenter le tri de table dans Angular

À propos de l'utilisation du stockage local et du stockage de session dans Vue

Comment Jackson analyse la chaîne json

Comment lire les fichiers locaux en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!