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

Question

我正在努力解决项目的 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.

Answer 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'),
        },
      )
    }
  }
}

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

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

这是取自官方文档：https://nuxtjs.org/docs/2.x/features/file-system-routing#extendroutes
我强烈建议您阅读它，特别是如果您使用命名视图。

至于 URL 捕获，从来没有听说过$route-class，但你可以在 上进行某种分割/，非常可行！