Nested Navigation. Add a Redirect?

[wcrowther]

I am working on a sample Vue app that I am switching from regular vue-router to unplugin-vue-router that looks like this:

Here is the new page structure that I trying to make work.

The navigation works ok but the problem is that if I make the nested how.vue file index.vue it always shows as selected because the link to it is /About. If I leave it as how.vue then the top-level About button just shows the page but does not pre-select a child component (ie: how, why, where). My existing vue-router implementation has a redirect at /About to /About/How that solves the problem.

My best guess is to add the following code to router.js to make a redirect:

const router = createRouter(
{
	history: createWebHistory(),
	extendRoutes(routes) {
		routes.push( { path: '/About', name: 'AboutRedirect', redirect: { path: '/About/How' }} )
	} 
})

but that does not work and throws the error below. I saw a discussion that suggestions this may be a bug or is there some syntax that I am missing. Any ideas how to make this work?

[wcrowther]

I am still curious if it is possible to add a route programmatically with extendRoutes() as above without getting an error but I figured out a solution to my useCase. Instead of above, I added a redirect in the /About page that redirects to /About/How and solves the problem with the selected tab not applying active class correctly.

import { definePage } from 'vue-router/auto'
	
definePage({
	redirect: '/About/How'
})

[posva]

The navigation works ok but the problem is that if I make the nested how.vue file index.vue it always shows as selected because the link to it is /About.

Use the exact active class instead of the active one to set the style