Загрузка компонента с помощью Vue Router

Question

Я хочу загрузить 3 компонента одновременно:

<app-header />
<app-main />
<app-footer />

Но я хочу загрузить Router View и на этой странице.

<app-header />
<router-view />
<app-footer />

Пока я нажмуна router-link тогда <app-main /> исчезнет и будет виден <router-view />.

Есть ли лучший способ справиться с этим без if или show?

Answer 1

Вы можете передать вид маршрутизатора через слот вашему основному компоненту приложения следующим образом:

<app-header />
<app-main>
  <router-view/>
</app-main>
<app-footer />

Также вам нужно вставить тег слота в основной компонент приложения следующим образом:

<template>
  <!-- your code -->
    <slot></slot>
  <!-- ... -->
</template>

Для более подробной информации посетите https://vuejs.org/v2/guide/components-slots.html