在 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
没有重复我的文件夹结构
如果我添加一个带有参数名称的文件,它将是一个必需的参数,我将不得不复制没有这个参数的文件夹结构来处理这两种情况
最佳答案
在我的情况下解决了这个问题。我有这个页面树:
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
这在两种情况下呈现相同的页面,在第二种情况下,我的值是 my-category
在 $route.params.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'
})
}
}
}
顺便说一句:chunkName
如果您使用 nuxtI18n
则是必要的插件,之后,在这个插件中,动态路由的配置是(在我的例子中):// 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'
}
}
}
}
关于vue.js - 如何在 Nuxt.js 的嵌套路由中创建可选参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54958289/