Estoy tratando de anidar rutas con el enrutador VueJS (next/4.x) para que la ruta secundaria reemplace completamente el componente principal.
El ejemplo dado aquí supone que para cada subruta, se representa un subcomponente, pero me gustaría reemplazar el componente User por completo al navegar a /user/johnny/profile en lugar de representar Profile dentro del componente User .
/user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ Traté de omitir la etiqueta <router-view> en User , pero eso simplemente no muestra el Profile cuando navego a /user/johnny/profile (probablemente porque no encuentra un lugar para representar el componente Profile ).
Lo único que parece estar funcionando es verificar el nombre de la ruta en UserComponent y ocultar <router-view> cuando la ruta es /user/johnny u ocultar el marcado para UserComponent y simplemente mostrar <router-view cuando la ruta secundaria está activa . Me pregunto si hay una mejor manera de hacer esto. Por ejemplo, sería bueno si la <router-view> pudiera eliminarse y ProfileComponents encontrara la <router-view> del padre más cercano para renderizarse, pero no he encontrado formas de configurar esto o ejemplos que sugieran eso es posible...
Lo que debe hacer es crear los componentes Perfil y Publicaciones como rutas secundarias a la ruta del usuario.
Entonces, en el componente del usuario, solo necesita definir el en la etiqueta de la plantilla.
Ejemplo:
ruta.js
const routes = [ { path: '/user', name: 'user', component: UserComponent, children: [ { path: '/profile', name: 'user-profile', component: UserProfileComponent }, { path: '/post', name: 'user-post', component: UserPostComponent } ] } ]UserComponent.vue
<template> <router-view /> </template>