web-dev-qa-db-fra.com

comment créer un composant 404 dans vuejs en utilisant vue-router

Je suis nouveau chez vuejs et je travaille sur mon premier projet avec vue. Je me demande simplement comment je vais router vers mon composant 404.vue lorsque l'URL demandée n'est pas trouvée.

Une idée?

vue.jshttp-status-code-404vue-componentvue-router
19
Kamga Simo Junior

Dans la déclaration des routes, j'aime bien ajouter ceci:

[
  ...  
  { path: '/404', component: NotFound },  
  { path: '*', redirect: '/404' },  
  ...  
]

Ce qui impliquera que si l'utilisateur est dirigé vers un chemin qui ne correspond à aucun itinéraire, il sera redirigé vers l'itinéraire "404", qui contiendra le message "introuvable".

La raison pour laquelle je l'ai séparé en 2 routes est que vous pouvez également diriger par programme l'utilisateur vers la route 404 dans le cas où certaines données dont vous avez besoin ne sont pas résolues.

Par exemple, si vous créez un blog, vous pourriez avoir cette route:

{ path: '/posts/:slug', component: BlogPost }

Ce qui résoudra le problème, même si le slug fourni ne récupère aucun article de blog. Pour gérer cela, lorsque votre application détermine qu’une publication n’a pas été trouvée, ne

return this.$router.Push('/404')

ou

return router.Push('/404')

si vous n'êtes pas dans le contexte d'un composant Vue.

Il convient toutefois de garder à l'esprit que la bonne façon de traiter une réponse non trouvée ne consiste pas uniquement à afficher une page d'erreur. Vous devez essayer de fournir une réponse HTTP 404 au navigateur. Cela ne sera pas nécessaire si l'utilisateur se trouve déjà dans une application à une seule page, mais si le navigateur sélectionne cet article de blog comme demande initiale, le serveur doit en réalité renvoyer un code 404.

69
g-wilson

Il y a plusieurs façons de faire ça.

Le plus générique consiste à vérifier si le chemin correspond à un itinéraire avant la navigation et s'il n'est pas redirigé vers la page non trouvée .

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

Voir JSFiddle .

10
Kuba Szymanowski

Après @ g-wilson répondre je suis allé { path: '*', component: NotFound }. Cela pourrait être utile si vous ne voulez pas faire de redirection.

8
Tarasovych