VueJS 导航到子组件

Posted 2023-02-16

【中文标题】VueJS 导航到子组件

【英文标题】：VueJS navigate to child component

【发布时间】：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 会更新，但不会导航到子组件。 我要改变什么？

【参考方案1】：

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

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

App.vue

<router-view>

应用组合

<router-view>

投资组合总结