Me gustaría tener URL en conjuntos anidados de categorías seguidos de un producto. No estoy seguro de cómo hacer que una ruta coincida correctamente.
URL que me gustaría tener:
--- 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-proIntenté esto pero me da los errores:
{ 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') }¿Hay alguna manera de hacer que funcionen juntos?
El patrón de expresiones regulares en :productSlug(\\d+) (es decir, \d+ ) solo coincide con dígitos, pero las URL de sus productos en realidad contienen más que solo dígitos (por ejemplo, uno de ellos termina con /111-nvidia-rtx-3080ti ), por lo que no se produce ninguna coincidencia. El patrón del parámetro debe coincidir exactamente .
Para resolver el problema, agregue un comparador de comodines al patrón productSlug :
// BEFORE // :productSlug(\\d+) // AFTER :productSlug(\\d+.+) ^^ one or more characters, matching anything Además, parece que solo hay un producto en cada URL, por lo que el patrón para el parámetro de ruta no debe agregarse con + :
// BEFORE // :productSlug(⋯)+ // AFTER :productSlug(⋯) La ruta de ruta final para product.show debe ser:
path: '/:slug(\\w+)+/:productSlug(\\d+.+)',