Home

what do you want to do

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)

what did you do

In my pages folder I have the following structure:

pages
├── _.vue // component for category pages
└── _/
   └── p/
       └── _.vue // component for product pages

what did you expect to happen

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,
 }]

what happened actually

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.