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

Question

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

我正在使用 Repeatable params 构建一组嵌套的类别，因此 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

由于您无法使用正则表达式来帮助您按类别对产品进行排序，最简单的解决方案似乎是在 url 中添加一个分隔符部分，以告诉路由器接下来是产品：

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

如果您仍然遇到问题，请告诉我。编码愉快！

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

Vuejs show product page in combination with repeatable route params as nested categories

vue.js

vue-router