Is there a way to do a redirect?

[phppirate]

with vue router I have this

{
    path: "/",
    redirect: 'dashboard',
    children: [
        {
            path: "/",
            redirect: 'dashboard'
        },
        {
            path: "dashboard",
            component: () => import('./dashboard.vue')
        }
    ]
}

to auto redirect to the dashboard page whenever the '/' route is visited.

Is there a way to do this with this plugin using filenames or would I just have to have an index.vue page that has a router.push('dashboard') or something like that?

[posva]

Use extendRoutes to add the redirect option:

const router = createRouter({
  extendRoutes: (routes) => {
    const targetRoute = routes.find((r) => r.name === '/')
    if (targetRoute) {
      targetRoute.redirect = { name: 'dashboard' }
    }
    // completely optional since we are modifying the routes in place
    return routes
  },
  history: createWebHistory(),
})

Since the redirect option only exist for routes without a component or with children, it's a different type of option. Maybe we could find a way of improving this. The problem when adding redirect to the <route block> is that it still forces to add other options if the route doesn't have children 🤔

[phppirate]

Interesting. This is a little tough to use due to the way routes get nested, so because you are not working with a flat array of routes here, you would have to do some crazy stuff to get at the route you are looking for. I am interested in coming up with an easy solution to this but cannot think of anything right now. The extendRoutes method seems to be the only solution for now but hopefully, we/the community can come up with a better solution in the future. I will keep thinking about it.

[posva]

you can also use the definePage() macro btw

[phppirate]

Where can I find documentation on the definePage() macro?

[posva]

Currently only with the auto-completion and TS types (e.g. hovering definePage() on your IDE)