vue.js vue-router améliore l'expérience utilisateur

Cette fois, je vous présente vue.js vue-router pour améliorer l'expérience utilisateur. Quelles sont les précautions pour vue.js vue-router pour améliorer l'expérience utilisateur. Voici des cas pratiques, jetons un coup d'œil. .

Avant-propos

Tout le monde sait que pour les applications d'une seule page, le responsable fournit vue-router pour gérer les sauts de routage Récemment, je travaille sur un SPA basé sur vue-router et je souhaite unifier la page de routage invalide (404). . traiter.

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, pardonnez-moi s'il vous plait =_=

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.

Par conséquent, si nous ne le traitons pas, la dernière page sera vierge.

Alors, pouvons-nous faire toute une histoire sur la correspondance des itinéraires ?

Suivi d'itinéraire

Dans le composant, vous pouvez obtenir l'itinéraire actuel à partir de this.$route, puis vous pouvez utiliser watch pour surveiller les changements d'itinéraire. La surveillance de tous les changements d'itinéraire incombera naturellement au composant de routage racine (tel que App.vue).

Détection d'itinéraire invalide

$route.matched contient le résultat correspondant de la route actuelle. S'il est vide, la route actuelle n'est pas valide.

Invite d'interface

Le rendu conditionnel peut être utilisé. Si la route est valide, la vue du routeur sera rendue. Si la route n'est pas valide, le message d'invite sera rendu.

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: 'App',
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

Quant à la convivialité du 404, c'est à vous de décider

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée de l'utilisation de la bibliothèque de composants mobiles cube-ui

Comment appeler le WeChat fonction de partage dans nodejs

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!