Dynamic nested routes

[coral mica]

Hey everyone! Im kind of stuck with my routing strategy. So my pages directory looks like this:

pages
├── [category]
│   ├── index.vue
│   ├── [sub_category]
│   │   ├── index.vue
│   │   └── [handle]
│   │       └── index.vue

In the case a category doesn't have a sub_category, I extended the routes in the nuxt.config.ts through hooks like that:

 hooks: {
    'pages:extend': function (pages) {
      pages.push({
        name: 'category-handle',
        path: '/:category/:handle',
        file: '~/pages/[category]/[sub_category]/[handle]/index.vue',
      })
    },
  },

Now when navigating through the app, everything works as expected. The issue is when reloading or remounting the page on such a route (/somecategory/someproduct, as instead of rendering the page defined in the hooks property, the index.vue from the [sub_category] directory gets rendered. I figured it's becasue there's always the sub_category getting passed as a param instead of handle (I mean how should it know?).
Here's a small reproduction: https://stackblitz.com/edit/nuxt-starter-fxkfp1?file=app.vue
If you navigate to "Handle without Subcat" and hit reload, that's the issue I mean.
I already kind of tried to solve this with a middlware, but all I fabricated was an infinite redirect 😅

Has somebody faced a similiar problem, or can someone maybe point me into the right direction?
I appreciate you help 😊

[coral mica]

Now if I drop file based routing like here:
https://stackblitz.com/edit/nuxt-starter-bhpexy?file=app%2Frouter.options.ts
the "Handle with Subcat" seems to work, but instead the issue occurs on the "Subcategory" page

[coral mica]

Bump - has anyone got an idea? Hard to imagine im the only facing this

[native elk]

hi
these two router rules are identical, it takes the first one.

in your case, you need additional tokens for the regular expression
for ex.

which means you need to give the router hints

path: '/:category/handle__:handle',
path: '/:category/subdir__:sub_category',

refs:
https://router.vuejs.org/guide/essentials/route-matching-syntax.html
https://router.vuejs.org/guide/advanced/dynamic-routing.html
https://nuxt.com/docs/guide/directory-structure/pages

yes, the urls will contain unnecessary "parasitic" information
otherwise, you need a service - url-resolver, on the backend side, which will give the type of pages
ex:
GET /resolver/resolve?path=/catalog/matrasy/standartnye/zhestkie/

{
  "type": "tag",
  "category": 1,
  "tag1": 550,
  "tag2": 425,
  "seo": {
    h1...
    ...
   },
  "breadcrumbs"....
}

Also, page id is often added to the url to make resolve faster on the backend

@coral mica also here's a handy tool for your task
https://paths.esm.dev

[coral mica]

Ok thanks @native elk, I see now. I somehow missed that part in the docs. But as far I can tell and tried, it's impossible without any kind of middleware to determine the right page/component when sub_category and handle are both alphabetical letters?
Could elaborate a little more on the url resolver?

[native elk]

urlResolver is the name of your custom API that has all the information about your pages, including redirects
The frontend implementation looks a bit strange, basically for the rule https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route you add <component :is="resolvedPage">

one more possible solution is to add a parasitic subdirectory to the address of the:
/c/ - category
/d/ - department

/d/tekhnika-dlya-kukhni/c/skovorody-voki/

again, if you want nice looking urls without unnecessary nesting (/d/:department/c/:catalog/b/:brand/s/:series/) or utility prefixes (/d_:department/c_:catalog/b_:brand/s_:series/), you need a centralized solution that has knowledge of your pages

[coral mica]

Alright, thanks for you help, really appreciated! 🙏