在 Nuxt 中将多个新路径扩展到单个页面 [英] Extend several new paths to a single page in Nuxt

问题描述

我正在努力处理项目的 nuxt 文件夹/路由结构:

I am struggeling with the nuxt folder/route structure for a project:

我想实现:所有这些都应该显示 pages/data/index.vue:

I want to achieve: All of them should show pages/data/index.vue:

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

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

And then access the parameter region or industry via the $route-class.

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

If I add _region folder and an _industy.vue it will show those files and I want to show and use the index.vue.

推荐答案

EDIT:因为 region 和 industry 可能是动态的.
您可以在 nuxt.config.js 文件

EDIT: Since region and industry are probably dynamic.
You could use this setup in your nuxt.config.js file

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 文件.无需制作一些奇怪的目录或文件，您可以将所有内容放在一个地方.

With this configuration, you can go to either /data, /data/:region or /data/:region/:industry with only your index.vue file. No need to make some strange directories or file, you can keep all in one single place.

PS:顺序重要.把最具体的放在最上面，否则 /data/* 也会捕获 /data/*/* 并且你永远不会到达 data-region-industry.这可以在 Vue 开发工具的 router 选项卡中快速复查.

PS: the order is important. Put the most specific at top, otherwise /data/* will also catch /data/*/* and you'll never reach data-region-industry. This can be double-checked pretty quickly in the router tab of the Vue devtools.

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

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

As for the URL catch, never heard of $route-class but you could make some kind of split on /, pretty doable!

这篇关于在 Nuxt 中将多个新路径扩展到单个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！