VueJS 导航到子组件

【问题标题】：VueJS navigate to child componentVueJS 导航到子组件
【发布时间】：2021-12-16 05:30:01
【问题描述】：

我在组件中有一个按钮，onclick 将导航到其子组件。

按钮代码

<button class="summary" @click="navigateToSummary">
        <span>Summary</span>
</button>

methods:{
  navigateToSummary() {
      return this.$router.push({
        name: 'PortfolioSummary',
        params: { coinId: this.coinSummary.coinId },
      });
    },
}

路由器代码

  {
      name: 'AppPortfolio',
      path: '/portfolio',
      component: AppPortfolio,
      children: [
        {
          name: 'PortfolioSummary',
          path: ':coinId',
          component: PortfolioSummary,
          props: true,
        },
      ],
    },

单击按钮时，浏览器中的 url 会更新，但不会导航到子组件。我要改变什么？

【问题讨论】：

标签： javascript vuejs2 vue-router

【解决方案1】：

您的AppPortfolio 视图需要它自己的<router-view>，其中PortfolioSummary 将被渲染。

基本上，当您以这种方式使用嵌套子路由时，它们需要在 router-view 内使用 router-view 来解决您的 2 树深度设置，3 表示深度树示例将需要 3 个嵌套的 router-views，依此类推第四。

App.vue

<router-view>
- 应用组合
  
  <router-view>
  - 投资组合总结

【讨论】：