Как использовать разные компоненты в одном шаблоне vue?

Question

[Евгений Журов]

Добрый день. Изучаю vue, делаю на нем учебное приложение. Сейчас структура App.vue такова:

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

<board-view></board-view> - по сути, крупный шаблон, внутри которого лежат два компонента помельче:

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

Внутри <app-section></app-section> тоже есть разделение, на хэдер и основной контент:

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

И внутри <section-window></section-window> сейчас расположено следующее:

<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>

Все вышеизложенное - отдельные компоненты, в отдельных файлах.

Предполагается, что вместо <div class="board"></div> в компоненте section-window могут быть совершенно другие компонены. Равно как и в App.vue - может быть <board-view></board-view>, а может быть и какой-нибудь anything-else-view. Вопрос - как внутри таких, так сказать, сквозных шаблонов, использовать разные компоненты, в зависимости от того, какой роутинг задан? Или, может быть, подобный подход, в целом неправильный?

Answer 1

[Сергей delphinpro]

Дофига лишний компонентов на первый взгляд..
Но фиг с ним. Пилите роутер-вью на месте меняемых компонентов:

<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>

Ну а дальше изучать https://router.vuejs.org/ru/guide/essentials/neste...

Comments

[Евгений Журов]

Понял, спасибо