How to use different components in the same vue template?

Question

Vue.js

Good afternoon. I'm learning vue, making a training application on it. Right now the App.vue structure is:

<template>
  <div id="app">
    <board-view></board-view>
  </div>
</template>

<board-view></board-view>- in fact, a large template, inside of which there are two smaller components:

<template>
  <main class="main">
    <app-aside></app-aside>
    <app-section></app-section>
  </main>
</template>

There <app-section></app-section>is also a division inside, into a header and main content:

<template>
  <section class="app__section">
    <section-header></section-header>
    <section-window></section-window>
  </section>
</template>

And inside <section-window></section-window>now is the following:

<template>
  <section class="window">
    <div class="window__wrapper vuebar-element" v-bar>
      <div class="board">
        <add-button></add-button>
        <card-lists :task_list="getTasks"></card-lists>
      </div>
    </div>
  </section>
</template>

All of the above are separate components, in separate files.
It is assumed that instead <div class="board"></div>of the section-window component, there may be completely different components. As well as in App.vue - maybe <board-view></board-view>, and maybe some anything-else-view. The question is how to use different components inside such, so to speak, end-to-end templates, depending on what routing is set? Or, perhaps, such an approach is generally wrong?

Answer 1

Dofiga extra components at first glance ..
But figs with him. Saw the router-view in place of the replaced components:

<div id="app">
    <router-view></router-view>
</div>

<main class="main">
    <app-aside></app-aside>
    <router-view></router-view>
</main>

<section class="app__section">
    <section-header></section-header>
    <router-view></router-view>
</section>

Well, then study https://router.vuejs.org/ru/guide/essentials/neste...