How to properly render 404 pages with Vue Router?

Question

Vue.js

Now in the route at the very end there is a construction for 403, 404 errors:

....
{ 
    path: '/error/403', 
    name: 'error_403', 
    component: E403
}, { 
    path: '/error/404', 
    name: 'error_404', 
    component: E404
}, {
    path: '*', 
    redirect: {name: 'error_404'}
}

For an example (so as not to give the whole code) in a test component.
After I receive the response status code in axios, I push to the route I need with an error.

if(response.status == 403) {
    this.$router.push({name: 'error_403'});
} else if(response.status == 403) {
    this.$router.push({name: 'error_404'});
}

What I don't like is that there is a redirect to the URL where a 404 error is shown. It's the same with 403 and all the others.
Please tell me if it is possible to do it differently.

For example, after intercepting the status I need, I would not push to the route I need, but simply render the component I need (E403, E404), or without changing the url?

Or how to implement this without a redirect?

Answer 1

wrote an article on the topic of 404 in vue
, I do not pretend to be true, but it works fine
https://habr.com/en/post/523078/