Nuxt配置：如何将不存在的路由自动重定向至其他域名

针对你遇到的Nuxt3项目中无匹配路由报500错误、需要重定向到主应用（https://example.com）对应路径的问题，提供以下几种可行方案：

方案一：全局路由中间件（推荐，覆盖SSR与客户端场景） #

通过全局路由中间件拦截所有路由请求，判断目标路由是否存在，不存在则直接重定向到主应用。

1. 在项目根目录的middleware文件夹下创建redirect-unmatched.ts文件：

export default defineNuxtRouteMiddleware((to) => {
  const router = useRouter()
  // 获取项目中已定义的所有路由
  const existingRoutes = router.getRoutes()
  
  // 判断目标路由是否存在（支持精确匹配与动态路由匹配）
  const isRouteExists = existingRoutes.some(route => {
    if (route.path === to.path) return true
    // 处理动态路由，如 /user/:id
    if (route.path.includes(':')) {
      const routeRegex = new RegExp(`^${route.path.replace(/:\w+/g, '[^/]+')}$`)
      return routeRegex.test(to.path)
    }
    return false
  })

  // 路由不存在时，重定向到主应用对应路径
  if (!isRouteExists) {
    return navigateTo(`https://example.com${to.fullPath}`, { external: true })
  }
})

2. 在nuxt.config.ts中注册该全局中间件：

export default defineNuxtConfig({
  router: {
    middleware: ['redirect-unmatched']
  }
})

方案二：自定义404捕获页面 #

创建一个捕获所有无匹配路由的页面，在页面中执行重定向逻辑，适合需要先展示友好提示再跳转的场景。

在pages目录下创建[...].vue文件：

<template>
  <div class="not-found">
    <h2>页面不存在</h2>
    <p>即将跳转至主应用对应页面...</p>
  </div>
</template>

<script setup>
const route = useRoute()

// 客户端侧跳转
if (process.client) {
  setTimeout(() => {
    window.location.href = `https://example.com${route.fullPath}`
  }, 1500)
}

// SSR侧直接返回重定向响应
if (process.server) {
  const event = useRequestEvent()
  event?.res.writeHead(302, { Location: `https://example.com${route.fullPath}` })
  event?.res.end()
}
</script>

方案三：自定义NuxtLink组件（提前避免客户端报错） #

如果希望在用户点击链接时就直接跳转到主应用（而非先触发路由报错再重定向），可以封装一个自定义Link组件，提前判断路由是否存在：

1. 在components目录下创建CustomNuxtLink.vue：

<template>
  <NuxtLink v-if="isValidRoute" :to="to">
    <slot />
  </NuxtLink>
  <a v-else :href="`https://example.com${resolvePath}`" target="_self">
    <slot />
  </a>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  to: {
    type: [String, Object],
    required: true
  }
})

const router = useRouter()

// 解析目标路由路径
const resolvePath = computed(() => {
  return typeof props.to === 'string' ? props.to : props.to.path || ''
})

// 判断路由是否存在
const isValidRoute = computed(() => {
  return router.getRoutes().some(route => route.path === resolvePath.value)
})
</script>

2. 在nuxt.config.ts中全局注册该组件：

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  }
})

之后项目中所有链接使用<CustomNuxtLink>替代NuxtLink即可，不存在的路由会直接生成指向主应用的a标签。

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