Vue Router with invalid parameter

Question

I'm learning how to use vue router and I can't understand how to do something.

I have a route with this path: '/entry/:id/'. So, I want a detail page.

I loop through every entry with v-for, obviously, get the id from that entry and then send it as param to router-link, like so:

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

When the link is accessed, I get the this.$route.params.id and I'm able to make a get request to API in order to get that specific entry. The problem is that when I access the entry-detail page with an invalid id that doesn't exist (e.g. /entry/invalid_id/), it gets me the layout without the data, fair enough, but how can I manage to redirect from that page or displaying 404 template instead of just having a blank filled page?

Sorry for my grammar mistakes, by the way.

Thanks in advance for answers!

craig_h · Accepted Answer · 2017-10-24 16:13:21Z

2

Assuming your ajax response returns an error code, then you should be able to catch this and handle it in your response, I'm using axios here:

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

If you don't get an error response you can just redirect when data is 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
})

answered Oct 24, 2017 at 16:13

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yierstem Over a year ago

I use axios too. Thanks for the answer, I think this solved my problem.

Collectives™ on Stack Overflow

Vue Router with invalid parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related