Обработка несуществующих путей

В приложениях на Vue часто возникает необходимость корректно обрабатывать ситуации, когда пользователь пытается перейти на несуществующий маршрут. Для этого используется механизм обработки «404 Not Found» в Vue Router. Vue Router предоставляет гибкие средства для настройки таких случаев, позволяя перенаправлять пользователей на специальную страницу или компонент.

Настройка маршрута для несуществующих путей

Основной подход заключается в добавлении маршрута с «ловушкой», который будет совпадать со всеми путями, не определёнными в конфигурации. Это реализуется с помощью символа :pathMatch(.*)*:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import NotFound from './components/NotFound.vue';

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

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

export default router;

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

  • :pathMatch(.*)* захватывает любые пути, не совпавшие с предыдущими маршрутами.
  • name: 'NotFound' позволяет легко программно переходить на этот маршрут через router.push({ name: 'NotFound' }).
  • Компонент NotFound.vue используется для отображения страницы с сообщением о том, что запрашиваемая страница не найдена.

Передача параметров в компонент NotFound

Иногда полезно передавать несуществующий путь в компонент, чтобы отображать информацию о том, какой URL был недоступен. Это делается с помощью props:

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

В компоненте NotFound.vue можно использовать переданный параметр:

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

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

Перенаправление на главную страницу

Вместо отдельной страницы можно настроить автоматическое перенаправление на существующий маршрут:

{ 
  path: '/:pathMatch(.*)*', 
  redirect: '/' 
}

В этом случае любое обращение к несуществующему маршруту перенаправляется на корневую страницу.

Ленивая загрузка страницы 404

Для оптимизации производительности можно использовать динамический импорт компонента NotFound:

{ 
  path: '/:pathMatch(.*)*', 
  name: 'NotFound', 
  component: () => import('./components/NotFound.vue') 
}

Это особенно важно в больших приложениях, где каждая страница может содержать значительный объём кода.

Обработка 404 на уровне сервера

Vue Router работает на клиенте, поэтому при прямом обращении к несуществующему пути через адресную строку браузера сервер должен быть настроен на возврат index.html, чтобы Vue Router мог обработать путь. Например, для Nginx:

location / {
    try_files $uri $uri/ /index.html;
}

Или для Express.js:

app.use((req, res, next) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

Это гарантирует корректную работу маршрутов даже при обновлении страницы на несуществующем пути.

Использование навигационных охранников

Можно дополнительно обрабатывать неизвестные пути через global beforeEach:

router.beforeEach((to, from, next) => {
  const routeExists = router.getRoutes().some(route => route.path === to.path);
  if (!routeExists) {
    next({ name: 'NotFound' });
  } else {
    next();
  }
});

Этот подход полезен для динамически создаваемых маршрутов, когда заранее неизвестно, какие пути будут доступны.

Важные нюансы

  • Последовательность маршрутов имеет значение: маршрут с :pathMatch(.*)* должен располагаться последним, иначе он перехватит все переходы.
  • Для многоуровневых приложений можно создавать подмаршруты 404 внутри children, чтобы обрабатывать ошибки внутри отдельных секций приложения.
  • Использование redirect вместо компонента обеспечивает прозрачное перенаправление, но не позволяет показывать индивидуальное сообщение для конкретного недоступного URL.

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

Оглавление