如何在 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

没有重复我的文件夹结构

如果我添加一个带有参数名称的文件，它将是一个必需的参数，我将不得不复制没有这个参数的文件夹结构来处理这两种情况

Answer 1

在我的情况下解决了这个问题。我有这个页面树：

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

我在搜索页面中需要一个可选的 'category' 参数。我将像这样扩展路线：

// 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'
      }
    }
  }
}

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

How to create an optional param in nested routes in Nuxt.js?

vue.js

vue-router

vuejs2

nuxt.js