Nuxt3动态路由配置：如何处理特定URL结构并避免重定向？

可以通过Nuxt3的动态路由命名与路由匹配优先级实现需求，无需配置重定向，也不用全局catch all路由，具体方案如下：

1. 目录结构设计 #

在pages目录下搭建以下文件结构，利用Nuxt路由匹配优先级（静态路由 > 多级动态路由 > 单级动态路由）区分不同场景：

pages/
└── fashion/
    ├── [page].vue       # 处理分页路由 /fashion/page-3
    ├── [id]/
    │   └── [slug].vue    # 处理文章路由 /fashion/35/cool-article
    └── index.vue         # 处理分类首页 /fashion

2. 各文件逻辑处理 #

• pages/fashion/index.vue：直接渲染时尚分类第一页内容，对应/fashion路径，作为静态路由优先级最高，会被优先匹配。
• pages/fashion/[page].vue：
  • 通过useRoute()获取page参数，校验是否符合分页格式（比如以page-开头），无效则返回404。
  • 示例逻辑：

    const route = useRoute()
    const pageNum = route.params.page.replace('page-', '')
    // 验证分页参数有效性
    if (isNaN(pageNum) || parseInt(pageNum) < 2) {
      throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
    }
    // 加载对应分页的分类数据
    const articles = await fetchCategoryArticles('fashion', parseInt(pageNum))
    

• pages/fashion/[id]/[slug].vue：
  • 通过useRoute()获取id和slug参数，加载对应ID的文章，同时校验slug是否匹配，不匹配则返回404。
  • 示例逻辑：

    const route = useRoute()
    const { id, slug } = route.params
    const article = await fetchArticleById(id)
    // 验证文章别名一致性
    if (article.slug !== slug) {
      throw createError({ statusCode: 404, statusMessage: 'Article Not Found' })
    }
    

3. 路由匹配优先级说明 #

Nuxt3会按以下顺序匹配路由：

• 优先匹配fashion/index.vue对应/fashion
• 其次匹配fashion/[id]/[slug].vue对应/fashion/xxx/xxx（多级动态路由优先级高于单级）
• 最后匹配fashion/[page].vue对应/fashion/xxx

这套结构能精准区分三个URL场景，既不用全局兜底路由，也无需预加载所有可能的路由，完全基于动态参数按需处理。

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