VUEJS显示产品页面与可重复的路由参数作为嵌套类别
我想访问类别集中的产品详细信息页面。 例如：websity.com/catalog/cat1/cat2/cat2/cat3/product-em-123
我正在使用可重复的参数构造一组嵌套的类别集，因此URL看起来很奏效：webleds.com/catalog/category/subcategory/anothersubcateg/，
{
path: '/catalog/:slug+',
name: 'category.show',
component: () => import('pages/category.show.vue'),
props: route => ({ slug: route.params.slug })
},
但是当我添加新路由规则时，它覆盖了类别的所有页面并将显示一个产品页面
{
path: '/catalog/:slug+/:productSlug',
name: 'product.show',
component: () => import('pages/product.show.vue'),
props: route => ({ slug: route.params.slug })
}
： 。
更新
这是我想拥有的URL列表：
format: /CAT+/PRODUCT_ID-PRODUCT_SLUG
/clothes/t-shirts/winter/men/20380-underarmor-crossfit-99x
/hardware/gpus/87689-nvidia-rtx-3080ti-24gb
/smartphones/ios/iphone-13-pro-512gb
I would like to access a product details page within the set of categories.
For example: website.com/catalog/cat1/cat2/cat3/product-item-123
I'm using a Repeatable params to construct a nested set of categories, so URL would look like this which works fine:website.com/catalog/category/subcategory/anothersubcateg/
{
path: '/catalog/:slug+',
name: 'category.show',
component: () => import('pages/category.show.vue'),
props: route => ({ slug: route.params.slug })
},
But when I add a new route rule it overrides all pages for categories and shows a product page instead:
{
path: '/catalog/:slug+/:productSlug',
name: 'product.show',
component: () => import('pages/product.show.vue'),
props: route => ({ slug: route.params.slug })
}
How to render a pages/product.show.vue file only when the product page is opened and not override the pages/category.show.vue file ?
UPDATED
Here is the list of URLs I would like to have:
format: /CAT+/PRODUCT_ID-PRODUCT_SLUG
/clothes/t-shirts/winter/men/20380-underarmor-crossfit-99x
/hardware/gpus/87689-nvidia-rtx-3080ti-24gb
/smartphones/ios/iphone-13-pro-512gb
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
由于您无法使用正则义务来帮助您从类别中对产品进行分类，因此最简单的解决方案似乎是在URL中添加一个分离器部分，以告诉路由器下面的内容是一个产品：
告诉我，如果您仍在面对问题。愉快的编码！
As you cannot use regex to help you sort products from categories, the simplest solution seems to be to add a separator section to your url to tell the router that what follows is a product:
Tell me if you're still facing an issue. Happy coding!