Кастомные страницы ошибок

В Vue Router управление навигацией и обработкой ошибок является важной частью построения надежного пользовательского интерфейса. Особое внимание уделяется страницам ошибок, таким как 404 Not Found или 500 Internal Server Error, которые позволяют пользователю получать корректную информацию при некорректных маршрутах или внутренних сбоях приложения.

Определение маршрутов для ошибок

Для создания кастомной страницы ошибки необходимо определить маршрут, который будет перехватывать все неизвестные пути. В Vue Router это делается с помощью специального паттерна path: '*' или более современного path: '/:pathMatch(.*)*':

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './views/HomePage.vue';
import NotFoundPage from './views/NotFoundPage.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFoundPage
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Ключевые моменты:

  • Использование /:pathMatch(.*)* позволяет поймать абсолютно любой путь, который не соответствует ранее определённым маршрутам.
  • Маршрут ошибки должен располагаться последним в массиве маршрутов, иначе он будет перехватывать все переходы.

Создание компонента страницы ошибки

Компонент страницы ошибки обычно содержит информативное сообщение и ссылки для возврата на главные разделы сайта:

<template>
  <div class="not-found">
    <h1>404 - Страница не найдена</h1>
    <p>Запрашиваемая страница отсутствует или была удалена.</p>
    <router-link to="/">Вернуться на главную</router-link>
  </div>
</template>

<script>
export default {
  name: 'NotFoundPage'
}
</script>

<style scoped>
.not-found {
  text-align: center;
  margin-top: 100px;
}
.not-found h1 {
  font-size: 3em;
  color: #e74c3c;
}
.not-found p {
  font-size: 1.2em;
  margin: 20px 0;
}
</style>

Особенности:

  • Стилизация должна быть лаконичной и понятной пользователю.
  • Необходимо использовать router-link для перехода по внутренним маршрутам, чтобы сохранить SPA-навигацию.

Обработка ошибок в навигации

Vue Router позволяет обрабатывать ошибки навигации через глобальные хуки router.beforeEach и router.onError. Например, можно перенаправлять пользователя на страницу ошибки при невозможности загрузки компонента:

router.onError((error) => {
  console.error('Ошибка маршрута:', error);
  router.push({ name: 'NotFound' });
});

Особенности:

  • router.onError ловит ошибки загрузки компонентов, ошибки сетевых запросов при динамическом импорте и другие исключения, связанные с маршрутизацией.
  • Важно логировать ошибки для последующего анализа.

Кастомные ошибки с кодами HTTP

Для серверного рендеринга или при использовании Nuxt.js можно добавлять маршруты с кастомными HTTP-кодами ошибок. В стандартном SPA подход заключается в отображении различных компонентов в зависимости от типа ошибки:

const routes = [
  {
    path: '/error/:code',
    name: 'ErrorPage',
    component: () => import('./views/ErrorPage.vue'),
    props: true
  }
];

В компоненте ErrorPage.vue можно принимать code как prop и динамически менять сообщение:

<template>
  <div class="error-page">
    <h1>{{ code }} - {{ message }}</h1>
    <router-link to="/">На главную</router-link>
  </div>
</template>

<script>
export default {
  name: 'ErrorPage',
  props: ['code'],
  computed: {
    message() {
      switch (this.code) {
        case '403': return 'Доступ запрещён';
        case '404': return 'Страница не найдена';
        case '500': return 'Внутренняя ошибка сервера';
        default: return 'Неизвестная ошибка';
      }
    }
  }
}
</script>

Преимущества подхода:

  • Позволяет использовать один компонент для всех типов ошибок.
  • Упрощает поддержку и расширение функционала кастомных страниц ошибок.

Динамическая загрузка компонентов ошибок

Для оптимизации производительности рекомендуется загружать страницы ошибок динамически:

const NotFoundPage = () => import('./views/NotFoundPage.vue');

Это снижает размер основного бандла и ускоряет первоначальную загрузку приложения.

Сочетание с навигационными guards

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

router.beforeEach((to, from, next) => {
  const userHasAccess = checkAccess(to);
  if (!userHasAccess) {
    next({ name: 'ErrorPage', params: { code: 403 } });
  } else {
    next();
  }
});

Такой подход объединяет логику безопасности и обработку ошибок в единую систему маршрутизации.

Итоговая структура

  • Маршрут ошибки всегда в конце массива маршрутов.
  • Компонент ошибки должен быть простым, информативным и переиспользуемым.
  • Обработка ошибок навигации через router.onError и guards.
  • Динамическая загрузка компонентов ошибок для оптимизации SPA.
  • Поддержка различных кодов ошибок через props и вычисляемые свойства.

Кастомные страницы ошибок в Vue Router обеспечивают плавный пользовательский опыт, позволяя корректно информировать о любых сбоях маршрутизации и предотвращать появление пустых или сломанных страниц.

Оглавление