Vue Router mit ungültigen Parameter

Question

Ich lerne, wie Vue-Router zu verwenden, und ich kann nicht verstehen, wie etwas zu tun ist.

Ich habe eine Route mit diesem Pfad: '/ entry /: id /'. Also, ich möchte eine Detailseite.

ich Schleife durch jeden Eintrag mit v-für, bekommt natürlich die ID von diesem Eintrag und dann als param sendet an Router-Verbindung, etwa so:

<router-link :to="{ name: 'entry-detail', params: {id: entry.id} }"> 

Wenn der Link erreicht wird, I Holen Sie sich das. $ route.params.id und ich bin in der Lage, eine Anfrage an die API zu machen, um diesen spezifischen Eintrag zu bekommen. Das Problem ist, dass, wenn ich auf die Entry-Detail-Seite mit einer ungültigen ID, die nicht existiert (zB/entry/invalid_id /), bekomme ich das Layout ohne die Daten, fair genug, aber wie kann ich es schaffen umleiten von dieser Seite oder 404 Vorlage anzeigen, anstatt nur eine leere Seite gefüllt zu haben?

Sorry für meine Grammatikfehler übrigens.

Vielen Dank im Voraus für Antworten!

Answer 1

Ihre Ajax-Antwort Unter der Annahme, ein Fehlercode zurück, dann sollten Sie in der Lage sein, diese zu fangen und es in Ihrer Antwort zu umgehen, ich bin mit axios hier:

axios.get('/api/results/' + this.$route.params.id).then(response => { 
    // success, set the model variables 
}).catch(error => { 
    // Nope, let's check what the error was 
    if(error.response.status === 404){  
    // redirect user 
    this.$router.push('/notFound') 
    } 
}) 

Wenn Sie einen Fehler nicht erhalte Antwort können Sie nur umleiten, wenn Daten null ist:

axios.get('/api/results/' + this.$route.params.id).then(response => { 
    // success, set the model variables 
    if(response.data == null){ 
    this.$router.push('/notFound') 
    } 
    // success, set the model variables 
}).catch(error => { 
    // Handle errors 
})