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

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

CodePudding user response：

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:

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

Tell me if you're still facing an issue. Happy coding!