I am trying to set up nested sets of categories in URLs that lead to specific products, but I'm having trouble with matching the routes correctly.
Here are the URLs I want:
--- renders a "category.show.vue": /$categorySlug+
app.com/catA/catB/
app.com/catA/catB/catXXX
--- renders a "product.show.vue": /$categorySlug+/$id-$productSlug
app.com/catA/111-nvidia-rtx-3080ti
app.com/catA/catB/222-nvidia-rtx-2060
app.com/catC/catD/333-iphone-13-pro
I have attempted this, but it's giving me errors:
{
path: '/:slug(\\w+)+/:productSlug(\\d+)',
name: 'product.show',
props: route => ({ slug: route.params.slug }),
component: () => import('pages/product.show.vue')
},
{
path: '/:slug+',
name: 'category.show',
props: route => ({ slug: route.params.slug }),
component: () => import('pages/category.show.vue')
}
Is there a way to make these routes work together?