How to redirect to default path? (migrating from Vue2)

[arthabus]

I have nested views and I need to redirect user to their default destination when they land to a parent route (like "/app" -> "/app/dashboard/list")

This was all working fine in Vue Router v3 but now I'm trying to figure out what are the options with Vue Router v4 as it seems like that bit changed and it breaks lots of the logic in our app.

Consider the following router:

let routerOptions = {
    history: createWebHistory(),
    routes: [

        {
            path: '/app',
            name: 'AppMain',
            component: MainLayout,
            redirect:'/app/dashboard',
            children: [
                {
                    path: 'dashboard',
                    component: DashboardMainPage,
                    redirect: 'dashboard/list',
                    children: [
                        {
                            path: 'list',
                            name: 'DashboardListRoute',
                            component: DashboardListPage,
                        },
                        {
                            path: 'calendar',
                            name: 'DashboardCalendarRoute',
                            component: DashboardCalendarPage,
                        },

                    ]
                },
            ]
        },
    ],

}

let router = createRouter(routerOptions)

This is how it worked in the Vue Router v3 (user starts with /app):

/app -> redirects to /app/dashboard
/app/dashboard -> redirects to /app/dashboard/list

But now in Vue Router v4 it just does this:
/app -> redirects to /dashboard/list

And when there is a third level of redirects it seems like the second redirect is completely ignored:

For example:

routes: [

		{
			path: '/',
			redirect: '/1',
		},
		{
			path: '/1',
			component: DashboardListPage,
			children: [
				{
					path: '',
					redirect: '2',
				},
				{
					path: '2',
					component: DashboardMainPage,
					children: [
						{
							path: '',
							redirect: '3'
						},
						{
							path: '3',
							component: DashboardListPage,
						},
					],
				},
			],
		},
	],

landing to "/" redirects to /2 (why not to /1?)
landing to "/1" also redirects to /2 (this doesn't seem to be consistent with the above redirect)
landing to /1/2 redirects to /3

While in all cases I expect user to be redirected to "/1/2/3" when they land to either "/", "/1" or "/1/2"

This used to work in Vue Router v3, but how to achieve that with Vue Router 4?