無効なパラメータを持つVueルータ

Question

私はvueルータの使用方法を学んでおり、何かを行う方法を理解できません。

私はこのパスのルートを持っています： '/ entry /：id /'。 詳細ページが必要です。ルータリンクをするため、そのよう

V-のための持つすべてのエントリを通じてIループ、明らかに、そのエントリからIDを取得し、その後のparamとして送信：

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

リンクにアクセスすると、I $ route.params.idを取得し、その特定のエントリを取得するためにAPIへのリクエストを取得することができます。 問題は、存在しない無効なID（例：/ entry/invalid_id /）を持つエントリ詳細ページにアクセスすると、データのないレイアウトが得られることです。しかし、どのようにすればリダイレクトできますか空白のページが表示されているのではなく、そのページか404のテンプレートが表示されますか？

私の文法の間違いのため、申し訳ありません。

お返事ありがとうございます！

Answer 1

私はここにaxiosを使用しています、あなたのAjaxのレスポンスがエラーコードを返し、その後、あなたはあなたの応答でこれをキャッチし、それを処理することができるはずと仮定：あなたがエラーを取得しない場合は

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') 
    } 
}) 

をレスポンスはデータがnullのときにリダイレクトできます：

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 
})