How to use new routing with multiple routes for the same component, with named views

[AlbertoPa]

Hello,

I have a case like the following, where I use named views :

{ 
    path: '/users',
    name: 'route1',
    component: () => import('./UserList.vue'),
},
{
    path: '/users/:id',
    name: 'route2',
    components: {
        default: () => import('./UserList.vue'),
        secondary: () => import('./User.vue'),
    },
},
{
    path: '/users/create',
    name: 'route3',
    components: {
        default: () => import('./UserList.vue'),
        secondary: () => import('./User.vue'),
    },
},
{
    path: '/user/:id',
    name: 'route4',
    component: () => import('./User.vue'),
},

What is the best way to have multiple routes in a component, without duplicate copies of User.vue like in the following structure?

src/pages/
├── user/
|     └── [id].vue  (User.vue [route4])
└── users/
      ├── index.vue (UserList.vue [route1, route2, route3])
      ├── [email protected]  (User.vue [route3])
      └── [id]@secondary.vue  (User.vue [route2])

where the content between () is to show the old component names and which route(s) it would apply to.

Previous posts ( #129 ) suggest using alias in the definePage() macro, but I can't get that to work with named views e.g., @secondary.

Thank you for your help!