Vuejs将产品页面与可重复的路由参数组合为嵌套的类别

Question

我想访问类别集内的产品详细信息页面。例如:website.com/catalog/cat1/cat2/cat3/product-item-123

我使用一个可重复的参数来构建一个嵌套的类别集，所以URL看起来像这样，这工作得很好:
website.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 })
}

如何在打开产品页面时渲染pages/product.show.vue文件而不覆盖pages/category.show.vue文件?

下面是我想要的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

Answer 1

因为你不能使用regex来帮助你从类别中分类产品，最简单的解决方案似乎是在你的url中添加一个分隔符部分，告诉路由器后面是一个产品:

path: '/catalog/:slug+/product/:productSlug',

告诉我如果你仍然面临一个问题。编码快乐!