wake-up-neo.com

Wie erstelle ich eine 404-Komponente in vuejs mit vue-router?

Ich bin neu in Vuejs und arbeite an meinem ersten Projekt mit Vue. Ich frage mich nur, wie ich zu meiner 404.vue-Komponente weiterleiten soll, wenn die angeforderte URL nicht gefunden wird.

Irgendeine Idee?

19

In der Streckendeklaration möchte ich Folgendes hinzufügen:

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

Dies bedeutet, dass, wenn der Benutzer zu einem Pfad navigiert wird, der keiner Route entspricht, dieser auf die Route "404" umgeleitet wird, die die Nachricht "Nicht gefunden" enthält.

Der Grund, warum ich es in zwei Routen unterteilt habe, ist, dass Sie den Benutzer in einem solchen Fall, in dem einige Daten, die Sie nicht auflösen möchten, auch programmgesteuert zur 404-Route weiterleiten können.

Wenn Sie beispielsweise ein Blog erstellen, haben Sie möglicherweise die folgende Route:

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

Was sich beheben lässt, selbst wenn der bereitgestellte Slug tatsächlich keinen Blogbeitrag abruft. Gehen Sie folgendermaßen vor, wenn Ihre Anwendung feststellt, dass ein Beitrag nicht gefunden wurde

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

oder

return router.Push('/404')

wenn Sie sich nicht im Kontext einer Vue - Komponente befinden.

Beachten Sie jedoch, dass die korrekte Behandlung einer nicht gefundenen Antwort nicht nur darin besteht, eine Fehlerseite bereitzustellen. Sie sollten versuchen, eine tatsächliche HTTP 404-Antwort an den Browser zu senden. Sie brauchen dies nicht zu tun, wenn sich der Benutzer bereits in einer einseitigen Anwendung befindet, aber wenn der Browser diesen Beispiel-Blogeintrag als erste Anforderung aufruft, sollte der Server tatsächlich einen 404-Code zurückgeben.

69
g-wilson

Hierfür gibt es verschiedene Möglichkeiten.

Am allgemeinsten ist es, vor der Navigation zu prüfen, ob der Pfad mit einer Route übereinstimmt, und auf die Seite Nicht gefunden umzuleiten.

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

Siehe JSFiddle .

10

Nach @ g-Wilson Antwort ging ich { path: '*', component: NotFound }. Könnte nützlich sein, wenn Sie keine Weiterleitung vornehmen möchten.

8
Tarasovych