Для реализации перенаправления (redirect) на страницу с ошибкой 404 в фреймворке Nuxt.js, вы можете использовать middleware или компонент среды выполнения (layout).
1. Middleware:
Перейдите в директорию /middleware
вашего Nuxt.js проекта и создайте новый файл redirect404.js
(или любое другое имя на ваш выбор).
Внутри этого файла впишите следующий код:
export default function ({ app, redirect, error }) { app.router.afterEach((to, from) => { // Проверяем, не существует ли переданный путь if (to.name === '404') { return } // В зависимости от ваших настроек маршрутизации, вы можете использовать // to.path или to.fullPath для перенаправления на 404 страницу const isRouteExist = app.router.options.routes.some(route => { return route.path === to.path || route.path === to.fullPath }) if (!isRouteExist) { redirect('/404') // перенаправляем на страницу с ошибкой 404 } }) }
Затем, чтобы включить этот middleware, добавьте внутри вашего файла nuxt.config.js
следующую конфигурацию:
module.exports = { // ... router: { middleware: 'redirect404' }, // ... }
2. Компонент среды выполнения (layout):
В вашем проекте создайте новый компонент или использовать существующий как основу для вашего layout.
Внутри компонента layout добавьте следующий код:
<template> <div> <Nuxt /> <div v-if="isRouteExist || $route.name === '404'"> <!-- Ваш код контента страницы --> </div> <div v-else> <!-- Подключение компонента с ошибкой 404 --> <error-page code="404" /> </div> </div> </template> <script> export default { // Локальные данные компонента data() { return { isRouteExist: true } }, // Прослушивание изменений роутера watch: { '$route'(to, from) { // Проверяем, существует ли путь маршрута this.isRouteExist = this.$router.options.routes.some(route => { return ( route.path === to.path || route.path === to.fullPath ) }) } } } </script>
Теперь, при открытии несуществующей страницы, пользователи будут перенаправлены на страницу с ошибкой 404. Вы можете настроить содержимое страницы 404 в компоненте error-page
или внутри <!-- Ваш код контента страницы -->
в компоненте layout.