Как корректно всё таки отдавать 404 страницу с Vue Router?

Question

[Евгений]

Сейчас в роуте в самом конце стоит конструкция для 403, 404 ошибок:

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

Для примера (что бы не приводить весь код) в тестовом компоненте.
После того как в axios получаю код статуса ответа, я пушу на нужный мне роут с ошибкой.

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

Не нравится то, что происходит редирект на URL где показывается 404 ошибка. То же самое и с 403 и всеми другими.
Скажите возможно ли реализовать как то по другому.

К примеру что бы после перехвата нужного мне статуса я не пушил на нужный мне роут, а просто отрисовывал нужный мне компонент (E403, E404), или без смены url?

Или как правильно такое реализовать без редиректа?

Comments

[Михаил]

Если без SSR это выглядит странно
Браузер получает 200, а пользователю вы "подставляете" 404

https://next.router.vuejs.org/guide/migration/#rem...

[Евгений]

Так в том то и дело что я на бэке отдаю 404, и когда axios получает этот код.
Вопрос в том как правильно мне подсунуть и отрисовать во vue страницы ошибок. У меня проблема именно в этом.

Answer 1

[Сергей delphinpro]

писал статью на тему 404 в vue
не претендую на истину, но работает отлично
https://habr.com/ru/post/523078/