**Базовая 404-страница:** ```vue ``` **Nested catch-all (404 внутри раздела):** ```typescript const routes = [ { path: '/admin', component: AdminLayout, children: [ { path: '', component: AdminDashboard }, { path: 'users', component: AdminUsers }, { path: 'settings', component: AdminSettings }, // 404 внутри /admin -- свой дизайн { path: ':pathMatch(.*)*', component: AdminNotFound } ] }, { path: '/docs', component: DocsLayout, children: [ { path: ':slug', component: DocPage }, // 404 для документации { path: ':pathMatch(.*)*', component: DocNotFound } ] }, // Глобальный catch-all { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound } ] ``` **Программный 404 (маршрут существует, но данные не найдены):** ```vue ``` **Navigation guard для проверки существования ресурса:** ```typescript // router/guards.ts const routes = [ { path: '/user/:id', component: UserProfile, beforeEnter: async (to) => { const exists = await checkUserExists(to.params.id as string) if (!exists) { return { name: 'not-found', params: { pathMatch: to.path.substring(1).split('/') } } } } } ] ``` **Разные 404 для разных разделов:** ```typescript const routes = [ // Маркетинговые страницы { path: '/', component: Home }, { path: '/pricing', component: Pricing }, // Приложение { path: '/app', component: AppLayout, children: [ { path: '', component: AppDashboard }, { path: 'projects', component: Projects }, { path: ':pathMatch(.*)*', component: () => import('@/pages/AppNotFound.vue') } ] }, // API docs { path: '/docs', component: DocsLayout, children: [ { path: ':slug', component: DocPage }, { path: ':pathMatch(.*)*', component: () => import('@/pages/DocNotFound.vue') } ] }, // Глобальный { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/pages/NotFound.vue') } ] ``` **SEO: правильный HTTP-статус для SSR/SSG:** ```typescript // При использовании Nuxt / SSR // В Nuxt 3: // pages/[...slug].vue автоматически создаёт catch-all // Для чистого Vue + SSR: // В серверном middleware проверяй, попал ли маршрут в catch-all router.afterEach((to) => { if (to.name === 'not-found') { // Установить HTTP 404 (зависит от SSR-фреймворка) if (import.meta.env.SSR) { // Пометить response как 404 } } }) ``` **404 с подсказками (умная страница):** ```vue ``` ## 📌 Реальные кейсы - **E-commerce** -- удалённый товар показывает "Товар снят с продажи" с рекомендациями - **Блог** -- устаревшая статья перенаправляет на актуальную (redirect) или показывает 404 с поиском - **SaaS** -- 404 внутри app показывает другой дизайн, чем 404 маркетингового сайта - **Документация** -- 404 с поисковой строкой и ссылками на похожие разделы ## Частые ошибки ```javascript // ❌ Catch-all НЕ последний -- перехватывает валидные маршруты const routes = [ { path: '/:pathMatch(.*)*', component: NotFound }, // ловит всё { path: '/about', component: About } // никогда не сработает ] // ✅ Catch-all всегда последний const routes = [ { path: '/about', component: About }, { path: '/:pathMatch(.*)*', component: NotFound } ] ``` ```javascript // ❌ Старый синтаксис Vue Router 3 { path: '*', component: NotFound } // не работает в Vue Router 4 // ✅ Синтаксис Vue Router 4 { path: '/:pathMatch(.*)*', component: NotFound } ``` ```javascript // ❌ Забыть обработать программный 404 (данные не найдены) // Маршрут /product/:id существует, но product с таким id нет // Пользователь видит пустую страницу // ✅ Редирект на 404 при отсутствии данных if (!product) { router.replace({ name: 'not-found', params: { pathMatch: ... } }) } ``` ## Резюме Catch-all маршрут `/:pathMatch(.*)*` ставится последним. Для вложенных разделов -- свой catch-all внутри children. Программный 404 -- через `router.replace({ name: 'not-found' })` когда данные не найдены. При SSR -- устанавливай HTTP 404. Умная 404-страница показывает подсказки на основе запрошенного URL. Не забывай про `router.back()` -- пользователь может вернуться. --- agentId: a87fffd9b6ed7e2b4 (use SendMessage with to: 'a87fffd9b6ed7e2b4' to continue this agent) total_tokens: 60093 tool_uses: 0 duration_ms: 684090 ---

404

Страница не найдена

Как обработать 404-страницу в Vue Router?