Почему не отрабатывает именованный router-view?

Question

[Александр]

Хочу сделать заполнение формы в несколько шагов
Сейчас форма оформления заказа работает при помощи навигации по роутам (кнопки вперед/назад)

есть корневой компонент в шаблоне которого рендерится дочерний компонет

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

при навигации рендериться один компонент

я хочу изменить логику работы формы
чтобы вывести в шаблон все Именованные представления
и редерить нужное в зависимости от роута
что то типа того

<template>
    <div>
        <router-view></router-view>
        <router-view name="BookBase"></router-view>
        <router-view name="FromAirport"></router-view>
    </div>
</template>

но в таком формате ничего не рендериться и ошибок не выдает, не могу понять в чем прикол - по докам так должно работать
на всякий случай скидую роутер и код компонента

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import BookMain from '../Components/BookMain'
import BookBase from "../Components/BookBase";
import FromAddress from "../Components/FromAddress";
import FromAirport from "../Components/FromAirport";
import PersonalInfo from '../Components/PersonalInfo';
import TotalBook from '../Components/TotalBook';
import BookToDb from '../Components/payment/BookToDb'
import PayByCard from '../Components/payment/PayByCard';
import PayByCash from '../Components/payment/PayByCash';
import YandexKassa from '../Components/payment/YandexKassa';
import FailPayment from '../Components/payment/FailPayment';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: {name: 'BookBase'},
        name: 'bookMain',
        component: BookMain
    },
    {
        path: '/base',
        name: 'BookBase',
        components: {
            default: BookBase
        }
    },
    {
        path: '/address',
        name: 'FromAddress',
        component: FromAddress,
    },
    {
        path: '/airport',
        name: 'FromAirport',
        component: FromAirport,
    },
    {
        path: '/personal',
        name: 'PersonalInfo',
        component: PersonalInfo
    },
    {
        path: '/total',
        name: 'TotalBook',
        component: TotalBook
    },
    {
        path: '/book-to-db',
        name: 'BookToDb',
        props: {redirectTo: true},
        component: BookToDb
    },
    {
        path: '/pay-by-card',
        name: 'PayByCard',
        component: PayByCard
    },
    {
        path: '/pay-by-cash',
        name: 'PayByCash',
        component: PayByCash
    },
    {
        path: '/yandex-kassa',
        name: 'YandexKassa',
        component: YandexKassa
    },
    {
        path: '/fail-payment',
        name: 'FailPayment',
        component: FailPayment
    },

];

const router = new VueRouter({  routes });
export default  router;

Comments

[Александр]

код компонента почему то не попал в спойлер

<template>
    <div>
        <router-view></router-view>
        <router-view name="BookBase"></router-view>
        <router-view name="FromAirport"></router-view>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueMask from 'v-mask';
    import BookBase from './BookBase';
    import FromAirport from './FromAirport';

    Vue.use(VueMask);

    export default {
        name: "BookMain",
        components:{
            BookBase,
            FromAirport
        }
    }
</script>

Answer 1

[Алексей Ярков]

1. Оформите код как положено, пожалуйста.
2. Прочтите вот это и сравните с тем, что у вас написано.

Comments

[Александр]

Читал много раз
но к сожалению не могу понять что у меня не так
не понимаю какой то базовый принцип, только учу фреймворк, так что не судите строго

если вы про роутер
я делал так тоже

path: '/',
        name: 'bookMain',
        components:{
            default: BookBase,
            air: FromAirport,
            adr: FromAddress
        }

что то я недопонимаю

[Алексей Ярков]

Александр, если так

components:{
        default: BookBase,
        air: FromAirport,
        adr: FromAddress
}

то должно быть так

<template>
    <div>
        <router-view></router-view>
        <router-view name="air"></router-view>
        <router-view name="adr"></router-view>
    </div>
</template>

[Александр]

Алексей Ярков, спасибо, я понял в чем ошибка
этот роут я писал как и все остальные, но на самом деле он отличается
он должен быть "контейнером" для компонетов
спасибо, натолкнули на мысль, я чесно читал доки - но был недостаточно внимателный(мозг кипел от обилия новой информации)