как создать компонент 404 в vuejs с помощью vue-router

Я новичок в vuejs, и я работаю над своим первым проектом с vue. Мне просто интересно, как я буду маршрутизировать свой компонент 404.vue, когда запрошенный url не найден.

Любая идея?

vue.js,http-status-code-404,vue-component,vue-router,

5

Ответов: 4


7 принят

Есть несколько способов сделать это.

Самый общий из них - проверить, соответствует ли путь любому маршруту до навигации, а если не перенаправляется на страницу « Не найден» .

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

См. JSFiddle .


32 ов

В объявлении маршрутов я хотел бы добавить это:

[
  ...  
  { path: '/404', component: NotFound },  
  { path: '*', redirect: '/404' },  
  ...  
]

Это будет означать, что если пользователь перемещается по пути, который не соответствует никаким маршрутам, он будет перенаправлен на маршрут «404», который будет содержать сообщение «не найден».

Причина, по которой я разделил ее на 2 маршрута, так это то, что вы также можете программно направлять пользователя на маршрут 404 в таком случае, когда некоторые данные вам не помогут.

Например, если вы создавали блог, у вас может быть такой маршрут:

{ path: '/posts/:slug', component: BlogPost }

Который разрешит, даже если предоставленный slug фактически не получает сообщение в блоге. Чтобы справиться с этим, когда ваше приложение определяет, что сообщение не было найдено, выполните

return this.$router.push('/404')

или

return router.push('/404')

если вы не находитесь в контексте компонента Vue.

Одно дело иметь в виду, однако, заключается в том, что правильный способ обработки не найденного ответа заключается не только в том, чтобы обслуживать страницу с ошибкой - вы должны попытаться выполнить фактический ответ HTTP 404 на браузер. Вам не нужно будет делать это, если пользователь уже находится внутри одностраничного приложения, но если браузер попадает в этот блог в качестве исходного запроса, сервер должен действительно вернуть код 404.


2

После ответа @ g-wilson я пошел { path: '*', component: NotFound }. Может быть полезно, если вы не хотите перенаправлять.


-4

Для того, что я делаю, я даю классу http-foundродительского div все мои компоненты, и я подключил крюк App.vue, я проверяю использование jQuery или Javascript, если есть какой-либо элемент с классом http-foundif, если я не перенаправляюсь на мою страницу 404 ,

App.vue

mounted(){
   if(!$('.http-found')){
     this.$router.push('/404')
   }
}
vue.js HTTP-статус-код-404, для компонента-View-маршрутизатор,