@alexmixaylov

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

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

есть корневой компонент в шаблоне которого рендерится дочерний компонет
<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;

  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
yarkov
@yarkov
https://github.com/yarkovaleksei/toster-extension
1. Оформите код как положено, пожалуйста.
2. Прочтите вот это и сравните с тем, что у вас написано.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 апр. 2019, в 06:39
500 руб./за проект
26 апр. 2019, в 06:16
1000 руб./за проект
26 апр. 2019, в 01:38
5000 руб./за проект