Tengo un botón en un componente que al hacer clic navegará a su componente secundario.
Código de botón
<button class="summary" @click="navigateToSummary"> <span>Summary</span> </button> methods:{ navigateToSummary() { return this.$router.push({ name: 'PortfolioSummary', params: { coinId: this.coinSummary.coinId }, }); }, }código de enrutador
{ name: 'AppPortfolio', path: '/portfolio', component: AppPortfolio, children: [ { name: 'PortfolioSummary', path: ':coinId', component: PortfolioSummary, props: true, }, ], },Al hacer clic en el botón, la URL se actualiza en el navegador, pero no navega al componente secundario. ¿Qué estoy destinado a cambiar?
Su vista de AppPortfolio requiere su propia <router-view> donde se representará PortfolioSummary .
Básicamente, cuando usa rutas secundarias anidadas de esta manera, requieren una router-view dentro router-view para establecer su configuración profunda de 2 árboles, un ejemplo de 3 para árboles profundos requerirá 3 router-views anidadas, y así sucesivamente y cuarto.
aplicación.vue
<router-view>
Portafolio de aplicaciones
<router-view>