I would like to have the following urls:
/category1/subcategory2/.../subcategoryx
/product_name/p/product_id
So there is no 'type' identifier at the start of the url, which means you need to trick vue-router a bit in using the correct component. Here I use the /p/
part in the product url to identify between categories and products. (Even better would be if you could identify by 'product_id = integer' and 'subcategory = string' but afaik this is not possible with vue-router)
In my pages folder I have the following structure:
pages
├── _.vue // component for category pages
└── _/
└── p/
└── _.vue // component for product pages
The correct configuration for vue-router should be as follows. Also see this jsfiddle: https://jsfiddle.net/50wL7mdz/50616/
[{
path: '/*/p/*',
name: 'all-p',
component: products
},{
path: '/*',
name: 'all',
component: categories,
}]
nuxt generates the above routes with children
routes:
{
path: '/*',
name: 'all',
component: categories,
children: {
path: 'p',
name: 'all-p',
component: products
}
}
But as both routes will contain a *
, the routes should be added in ascending greediness (with '/*' being most greedy). By using a children structure you loose the ability to list routes based on their greediness. It seems Nuxt.js already does this correctly when you use :slug
's, but not when you use wildcards.