Nuxt3中Route-Validation返回false时的路由匹配异常问询

架构老林

2026-7-31

Nuxt3路由验证失败为何显示默认错误页而非自定义404？

问题原因

Nuxt3中，definePageMeta的validate函数返回false时，触发的是已存在路由的验证失败错误，而非“未匹配到任何路由”的场景。
你通过插件添加的/:pathMatch(.*)*通配符路由，仅会匹配未被任何已定义路由覆盖的路径。而/problem/foo明确匹配到了/problem/[id]这个已注册的路由，只是验证不通过，所以Nuxt会优先触发页面级错误，渲染error.vue，而非走通配符路由。
至于/problem/foo/bar能渲染自定义404，是因为这个路径没有匹配到/problem/[id]（该路由仅匹配/problem/xxx格式的二级路径），所以被通配符路由捕获。

解决方法

方法1：验证失败时手动重定向到自定义404

修改/problem/[id]/index.vue的验证逻辑，在验证不通过时主动重定向到自定义404页面：

<script lang="ts" setup>
definePageMeta({
  async validate(route) {
    const isIdValid = new RegExp('^\\d+$').test(String(route.params.id));
    if (!isIdValid) {
      // 重定向到自定义404，同时返回404状态码
      return navigateTo('/404', { redirectCode: 404 });
    }
    return true;
  },
});
</script>

方法2：自定义`error.vue`统一处理404

在项目根目录创建error.vue，根据错误状态码渲染对应内容，把自定义404的逻辑整合进来：

<template>
  <div v-if="error.statusCode === 404">
    <!-- 你的自定义404内容 -->
    err
  </div>
  <div v-else>
    <!-- 其他错误的处理 -->
    Oops, something went wrong!
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{ error: { statusCode?: number; message?: string } }>();
</script>

这种方式更符合Nuxt的错误处理规范，同时能统一管理所有错误场景。