Nested routes in <router-view/>

[sjmc11]

Hello

I have the following directory/file structure for routes:

src/pages/
├── objects/
|     └── index.vue
|     └── [object_id].vue
|     └── create.vue

Inside index.vue I have a <router-view> where I want to display the create.vue inside as a nested route. But show singular object details page separately.

I am trying to understand how to achieve this from the docs and other discussions but I don't believe they describe the same use case: https://uvr.esm.is/guide/file-based-routing#nested-routes

Additionally, from other locations I want to be able to display the "create object" page inside a <router-view/>

This is so that I can implement a URL structure such as:

/objects/create-object
/resource/create-object
/blobs/create-object

I don't want to have duplicate the "create object" page for each directory.

The docs mention having a seperate objects.vue alongside the objects directory to achieve nesting, however I can't see how this achieves nesting for a specific sub route of the index.

This is the outcome I would like to achieve in standard router format:

{
    path: '/objects',
    name: 'objects',
    component: () => import('./pages/objects/index.vue'),
    children: [{
       path: '/create',
       name: 'createObject',
       component: () => import('./pages/objects/create.vue'),
    }]
},
{
    path: '/objects/:id',
    name: 'objectDetails',
    component: import('./pages/objects/[object_id].vue'),
},
{
    path: '/resources',
    name: 'resources',
    component: () => import('./pages/resources/index.vue'),
    children: [{
       path: '/create',
       name: 'createObjectFromResource',
       component: () => import('./pages/objects/create.vue'),
    }]
},

[PindaPixel]

What I did to get more specific use cases like yours working is using the routesFolder configuration (https://uvr.esm.is/guide/configuration.html). You can define path as a function to build your routes tree. In your case I think you could place your index file one folder up and rename it to objects.vue like the docs suggest, and then make sure that the items you don't want nested return a path with periods instead of slashes through the aforementioned path function.

The way I did this exact use case was by looking in SvelteKit's book (https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-page), and replace all slashes that come before an @ symbol in the file's path with periods. Then you could rename your [object_id].vue to @[object_id].vue and it would not be nested.

Lastly, if your routing is starting to get too many edge cases, I would just recommend taking the edge cases out of your routing structure and import them as regular components where you require them.

[zhang1446802857]

Is there a demo for reference

[PindaPixel]

I made an example here
https://github.com/PindaPixel/vue-dir-routing