Vue Nuxt路由简化：如何将文章相关多条路由合并为更少规则

云原生阿岚

2026-9-30

路由精简方案

完全可以把现有5条路由精简到3条，分类列表、全站列表的分页/首页路由都可以分别合并为1条规则，以下是具体实现：

一、合并为3条路由的配置

核心原理是用path-to-regexp的可选分组语法()?将分页部分设为可选匹配，组件内对page参数设置默认值1即可兼容原有逻辑：

{
  // 1. 分类文章列表（合并有分页/无分页场景）
  {
    path: '/posttype/category/:path+/(page/:page(\\d+)/)?',
    component: () => interopDefault(import('~/pages/archive/Category.vue')),
    name: 'term-category_article',
    meta: { taxonomy: 'category' },
    props: route => ({
      // 没有page参数时默认赋值为1
      page: route.params.page ? Number(route.params.page) : 1
    }),
    pathToRegexpOptions: { strict: true }
  },
  // 2. 全站文章列表（合并有分页/无分页场景）
  {
    path: '/posttype/(page/:page(\\d+)/)?',
    // 如果原有首页/分页页组件不想合并，可以动态导入对应组件
    component: route => interopDefault(import(
      route.params.page ? '~/pages/archive/Archive.vue' : '~/pages/frontpage/Archive.vue'
    )),
    name: 'archive-article',
    props: route => ({
      page: route.params.page ? Number(route.params.page) : 1
    }),
    pathToRegexpOptions: { strict: true }
  },
  // 3. 文章详情路由
  {
    path: '/posttype/:slug/',
    component: () => interopDefault(import('~/pages/single/Article.vue')),
    name: 'single-article',
    props: route => ({
      slug: route.params.slug
    }),
    pathToRegexpOptions: { strict: true }
  }
}

注意路由顺序不能调整：静态前缀路由要放在动态参数路由前面，避免/posttype/page/1被匹配为文章slug参数。