Vue 41: Rutas Anidadas
easy⏱ 5 mincoursevue
children + un <router-view> anidado
Una ruta puede declarar children, un array de sub-rutas anidadas bajo su propio path. El componente padre renderiza su propio layout — nav, header, lo que sea — más su PROPIO <router-view>, que es donde se renderiza el hijo que coincide. Eso significa dos <router-view> anidados entre sí.
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'overview', component: Overview },
{ path: 'settings', component: Settings },
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
Redirigiendo el path de la padre
Visitar /dashboard directamente no coincidiría con ningún hijo por defecto, así que el path vacío del hijo ('') lleva un redirect a /dashboard/overview — un patrón común para darle a una sección una pestaña por defecto razonable.
Pruébalo
Agrega una tercera ruta hija, por ejemplo 'billing', con su propio componente y enlace de navegación dentro del template de Dashboard.