Nuxt 3：如何通过SSR将所有404页面301重定向至首页

方法一：通过自定义 error.vue 页面处理 #

Nuxt 3的全局错误页面error.vue会捕获所有未匹配的路由（即404场景），我们可以在这个页面中针对SSR环境实现301重定向：

<template>
  <div>
    <p>页面不存在，正在跳转至首页...</p>
  </div>
</template>

<script setup>
const error = useError()
const router = useRouter()
const event = useRequestEvent()

// SSR环境下处理404重定向
if (process.server && error.statusCode === 404) {
  event.res.statusCode = 301
  event.res.setHeader('Location', '/')
  event.res.end()
}

// 客户端环境下的备用跳转逻辑
if (process.client && error.statusCode === 404) {
  setTimeout(() => router.push('/'), 1000)
}
</script>

方法二：使用全局路由中间件 #

通过全局中间件检查路由匹配状态，对未匹配的路由执行301重定向：

1. 创建全局中间件文件 ~/middleware/redirect-404.global.ts（文件名后缀.global.ts会自动注册为全局中间件，无需手动配置）：

export default defineNuxtRouteMiddleware((to) => {
  const event = useRequestEvent()
  const is404 = to.matched.length === 0

  if (is404 && process.server) {
    event.res.statusCode = 301
    event.res.setHeader('Location', '/')
    event.res.end()
  }

  if (is404 && process.client) {
    return navigateTo('/')
  }
})

关键注意点 #

• 仅在SSR环境中直接操作响应对象设置状态码和重定向头，客户端环境使用Nuxt内置的路由跳转方法。
• 301为永久重定向，会被搜索引擎收录并更新索引，若需临时重定向可替换为302状态码。
• 测试时需运行生产模式（nuxt build && nuxt preview），开发模式下部分SSR逻辑可能不会完全触发。

内容的提问来源于stack exchange，提问作者Ifnot