如何在Nuxt.js中创建嵌套路由中的可选参数？

Question

在nuxt.js应用程序中，我有如下嵌套的路由：route-1/route-2/route-3

我想在route-1后面添加一个可选的参数，以呈现相同的旧路由，但带有额外的信息(项目id或类似的东西)，这意味着它将映射到2种路由格式

route-1/:param/route-2/route-3或route-1/route-2/route-3

不复制我的文件夹结构

如果我添加一个具有param名称的文件，它将是必需的param，我将不得不复制文件夹结构而不使用此param来处理这两种情况

Answer 1

在我的案例中用这个解决了。我有这个页面树：

pages/
--| search/
----| index.vue
--| index.vue

我需要一个可选的‘类别’参数在搜索页面。我将像这样扩展路由：

// nuxt.config.js

export default {
  router: {
    middleware: [...],
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'search-category',
        path: '/search/:category',
        component: resolve(__dirname, 'pages/search/index.vue'),
        chunkName: 'pages/search/_category/index'
      })
    }
  }
}

如果我导航到/search或/search/my-category，这两种情况下都会呈现相同的页面，而在第二种情况下，$route.params.category中的值为my-category :)

在您的例子中，可能是这样的：

// nuxt.config.js

export default {
  router: {
    middleware: [...],
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'my-new-route',
        path: '/route-1/:param/route-2/route-3',
        component: resolve(__dirname, 'pages/same-route/index.vue'),
        chunkName: 'pages/same-route/_param/index'
      })
    }
  }
}

顺便说一句:如果您使用nuxtI18n插件，则chunkName是必需的，在此插件中，动态路由的配置为：

// nuxt.config.js

export default {
  i18n: {
    pages: {
      'search/index': { // <-- route in pages tree
        es: '/buscar',
        en: '/search'
      },
      'search/_category/index': { // <-- dynamic route configured
        es: '/buscar/:category',
        en: '/search/:category'
      }
    }
  }
}