Маршрут-заглушка для 404

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

Настройка маршрута-заглушки

Маршрут-заглушка для 404 создаётся с использованием псевдомаршрута, который захватывает все пути, не соответствующие существующим маршрутам. В Vue Router 4 это реализуется с помощью символа :pathMatch(.*)*.

Пример определения маршрута-заглушки:

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

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

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

export default router;

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

  • :pathMatch(.*)* — регулярное выражение, которое соответствует любому пути.
  • Этот маршрут должен находиться в конце массива routes, чтобы сначала проверялись все конкретные маршруты.
  • Компонент NotFoundPage отображает интерфейс ошибки 404.

Динамическое отображение информации о несуществующем маршруте

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

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: NotFoundPage,
  props: route => ({ invalidPath: route.path })
}

В компоненте NotFoundPage.vue можно использовать props:

<template>
  <div>
    <h1>Страница не найдена (404)</h1>
    <p>Маршрут "{{ invalidPath }}" не существует.</p>
  </div>
</template>

<script>
export default {
  props: ['invalidPath']
}
</script>

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

Навигация на страницу 404 программно

Иногда необходимо направлять пользователя на страницу 404 через код, например, при получении некорректного идентификатора ресурса. Vue Router позволяет это сделать через метод router.push:

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function redirectToNotFound() {
      router.push({ name: 'NotFound' });
    }

    return { redirectToNotFound };
  }
}

Использование именованного маршрута name: 'NotFound' делает навигацию более безопасной и независимой от конкретного URL.

Особенности использования с вложенными маршрутами

Для вложенных маршрутов также можно настроить глобальную обработку 404. Например, если есть раздел dashboard с дочерними страницами, и нужно отлавливать неверные пути внутри этого раздела:

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', component: DashboardHome },
    { path: 'settings', component: DashboardSettings },
    { path: ':pathMatch(.*)*', component: NotFoundPage }
  ]
}

В этом случае неправильный путь в пределах /dashboard будет обрабатываться отдельно от глобального маршрута 404.

Локализация и стилизация страницы 404

Страница 404 должна быть визуально заметной, чтобы пользователь понял, что произошла ошибка. Часто используют:

  • Крупный заголовок 404
  • Краткий текст объяснения
  • Кнопку возврата на главную страницу
  • Возможность поиска по сайту

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

Важные рекомендации

  1. Последовательность маршрутов — маршрут-заглушка должен идти последним, иначе он перехватит все запросы.
  2. Использование именованных маршрутов облегчает навигацию и предотвращает ошибки при изменении URL.
  3. Динамические параметры :pathMatch(.*)* гарантируют, что все неопределённые маршруты попадут на страницу 404 без необходимости перечислять их вручную.
  4. Разграничение 404 для отдельных разделов позволяет создавать более детализированную навигацию и гибко управлять пользовательским опытом.

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

Оглавление