如何在NuxtJs路由中使用星号（*）通配符？

当然可以实现！虽然Nuxt默认依赖pages目录自动生成路由，但我们有两种常用方式来复刻你在Vue Router里的「通配子路径」效果，下面一步步来：

方法一：利用Nuxt的Catch-All动态路由（推荐，符合Nuxt约定） #

Nuxt支持用[...slug].vue这种命名方式创建捕获所有后续路径的动态路由文件，完美适配你的需求：

1. 调整你的pages目录结构：

   pages/
   └── about/
       └── [...slug].vue  # 新增这个文件
   

2. 在[...slug].vue里写入你的About组件内容：

   <template>
     <div class="about-page">
       <h1>About Page</h1>
       <p>当前访问路径：{{ $route.fullPath }}</p>
     </div>
   </template>
   
   <script>
   export default {
     // 如果需要获取通配的路径参数，可以在这里处理
     asyncData({ params }) {
       // params.slug 是一个数组，比如访问 /about/123/abc 时，它的值是 ['123', 'abc']
       console.log('通配路径片段：', params.slug)
       return {}
     }
   }
   </script>
   

3. 处理根路径/about的访问：
   现在/about/xxx/yyy这类路径已经能匹配，但/about还不行。你有两个选择：
   • 把about.vue的内容直接合并到[...slug].vue，然后在nuxt.config.js里给这个路由加别名：

     export default {
       router: {
         extendRoutes(routes) {
           const catchAllRoute = routes.find(r => r.path === '/about/:slug*')
           if (catchAllRoute) {
             catchAllRoute.alias = '/about'
           }
         }
       }
     }
     

   • 或者在pages/about.vue里做简单重定向：

     <script>
     export default {
       asyncData({ redirect }) {
         redirect('/about/')
       }
     }
     </script>
     

这样设置后，/about、/about/123、/about/123/abc/123这些路径都会指向同一个About组件。

方法二：自定义路由配置（完全复刻Vue Router写法） #

如果你更习惯手动配置路由，可以在nuxt.config.js里扩展路由规则，和你原来的Vue Router写法几乎一致：

export default {
  router: {
    extendRoutes(routes, resolve) {
      // 先找到默认生成的/about路由（如果有的话），或者直接新增路由
      const existingAboutRoute = routes.find(route => route.path === '/about')
      
      if (existingAboutRoute) {
        // 修改原有路由，添加子路由通配规则
        existingAboutRoute.children = [
          {
            path: '*',
            component: resolve(__dirname, 'pages/about/index.vue')
          }
        ]
      } else {
        // 如果没有默认的/about路由，直接新增
        routes.push({
          path: '/about',
          component: resolve(__dirname, 'pages/about/index.vue'),
          children: [
            {
              path: '*',
              component: resolve(__dirname, 'pages/about/index.vue')
            }
          ]
        })
      }
    }
  }
}

这种方式完全自定义路由规则，和你原来的Vue项目写法逻辑一致，适合需要更复杂路由控制的场景。

验证效果 #

两种方法配置完成后，你测试以下路径：

• /about
• /about/123
• /about/123/abc/123/abc
  都会正常渲染你的About组件，和你原来的Vue项目效果完全一致。

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