Same component for multiple routes

[fedee13]

Hi! I want to use the same component in 3 different routes but I can't make the .d.ts file to update accordingly. (kind of related to #129 but I did not find an example for it)

If a create an alias it works, but in typed-router.d.ts only appears the "add" route (the alias are the edit and view) so I don't have a way to programatically call them thorugh the IDE autocomplete, it only gives me the "add" route.

How would I need to use extendRoutes so that I have the 3 routes as separate routes?

This is what I'm doing:

src/pages/
├── users/
├─────── add/
│   └────── [[id]].vue

definePage({
  alias: ["/users/:id?/edit", "/users/:id?/view"],
  name: "userPage",
  meta: {
    requiresAuth: true
  }
});

 'userPage': RouteRecordInfo<'userPage', '/users/add/:id?', { id?: ParamValueZeroOrOne<true> }, { id?: ParamValueZeroOrOne<false> }>,

/users/add/:id?
/users/:id?/edit
/users/:id?/view

This is what I'm trying to do:

/users/add
/users/3/edit
/users/3/view

[l1m2e]

Why should we exclude component in definePage? I think retaining this field can give users greater freedom

interface DefinePage extends Partial<Omit<RouteRecordRaw, 'children' | 'components' | 'component' | 'name'>>

In fact, is it only excluded at the type level now? I found that if I write like this, I will only encounter type errors and the function will run normally.

definePage({
  component: () => import('x.vue'),
})