I have a button in a component that onclick will navigate to its child component.
Button code
<button class="summary" @click="navigateToSummary">
<span>Summary</span>
</button>
methods:{
navigateToSummary() {
return this.$router.push({
name: 'PortfolioSummary',
params: { coinId: this.coinSummary.coinId },
});
},
}
Router code
{
name: 'AppPortfolio',
path: '/portfolio',
component: AppPortfolio,
children: [
{
name: 'PortfolioSummary',
path: ':coinId',
component: PortfolioSummary,
props: true,
},
],
},
On clicking the button, the url updates in the browser, but it doesnt navigate to the child component. What am I meant to change?
Your AppPortfolio view requires it's own <router-view> where PortfolioSummary will be rendered.
Basically when you use nested child routes in this manner they require a router-view inside a router-view to settle your 2 tree deep setup, a 3 for deep tree example will requires 3 nested router-views, so on and so fourth.
App.vue
<router-view>
AppPortfolio
<router-view>