将几个新路径扩展到 Nuxt 中的单个页面

Question

我正在为项目的 nuxt folder/route 结构苦苦挣扎：

我想达到：所有这些都应该显示 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

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

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

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

Answer 2

编辑：因为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 但你可以在 / 上进行某种拆分，非常可行！

将几个新路径扩展到 Nuxt 中的单个页面

Extend several new paths to a single page in Nuxt

routes

vue.js

vuejs2

nuxt.js