在 Nuxt 中将多个新路径扩展到单个页面

Posted 2023-02-22

【中文标题】在 Nuxt 中将多个新路径扩展到单个页面

【英文标题】：Extend several new paths to a single page in Nuxt

【发布时间】：2021-09-01 01:06:55

【问题描述】：

我正在为一个项目的 nuxt 文件夹/路由结构而苦苦挣扎：

我想实现： 他们都应该显示pages/data/index.vue：

www.example.com/data 
www.example.com/data/region
www.example.com/data/region/industry

然后通过$route-class访问参数区域或行业。

如果我添加_region 文件夹和_industy.vue，它将显示这些文件，我想显示和使用index.vue。

【参考方案1】：

编辑：因为region 和industry 可能是动态的。 您可以在 nuxt.config.js 文件中使用此设置

export default 
  router: 
    extendRoutes(routes, resolve) 
      routes.push(
        
          name: 'data-region-industry',
          path: '/data/*/*',
          component: resolve(__dirname, 'pages/data/index.vue'),
        ,
        
          name: 'data-region',
          path: '/data/*',
          component: resolve(__dirname, 'pages/data/index.vue'),
        ,
      )
    
  

使用此配置，您可以仅使用您的 index.vue 文件转到 /data、/data/:region 或 /data/:region/:industry。无需创建一些奇怪的目录或文件，您可以将所有内容放在一个地方。

PS：顺序是重要。将最具体的放在顶部，否则/data/* 也会捕获/data/*/*，而您将永远无法到达data-region-industry。这可以在 Vue 开发工具的 router 选项卡中快速进行双重检查。

这取自官方文档：https://nuxtjs.org/docs/2.x/features/file-system-routing#extendroutes 我强烈建议您阅读一下，尤其是如果您使用的是Named views。

---

至于 URL 捕获，从未听说过 $route-class，但您可以在 / 上进行某种拆分，非常可行！

【参考方案2】：

您可以在网址中使用query 而不是params。

www.example.com/data 
www.example.com/data/?region=x
www.example.com/data/?region=x&?industry=y

您仍然可以通过$route.query 访问查询数据。如果您不想使用查询，据我所知，您必须手动覆盖 nuxt 的 vue 路由器。

【讨论】：

谢谢。是的，我可以使用查询，但是它对 SEO 不太友好。因此我想使用参数。所以问题仍然存在 - 我如何强制/重写路由器：）