VueJS 导航到子组件

Question

我在组件中有一个按钮，单击它会导航到它的子组件。

按钮代码

<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 会在浏览器中更新，但不会导航到子组件。我要改变什么？

Answer 1

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

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

App.vue

<router-view>
- AppPortfolio
  
  <router-view>
  - 投资组合摘要

VueJS 导航到子组件

VueJS navigate to child component

javascript

vue-router

vuejs2