vue.js - 在 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

编辑:由于地区和行业可能是动态的。
您可以在 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。这可以在 Vue 开发工具的 router 选项卡中快速进行双重检查。

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

---

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