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

Question

Александр @alexmixaylov

Vue.js

Почему не отрабатывает именованный 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;

Вопрос задан более трёх лет назад
113 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Александр @alexmixaylov Автор вопроса

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

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

Написано более трёх лет назад

Решения вопроса 1

3 комментария

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

если вы про роутер
я делал так тоже
path: '/', name: 'bookMain', components:{ default: BookBase, air: FromAirport, adr: FromAddress }

что то я недопонимаю
Написано более трёх лет назад

Алексей Ярков @yarkov Куратор тега Vue.js

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

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>

Написано более трёх лет назад

Александр @alexmixaylov Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 16 часов назад
- 46 просмотров
1

ответ
Vue.js

Средний
Какие существуют способы отреагировать на удаление элемента из массива, который передается как пропс в другие компоненты?
- 1 подписчик
- 16 часов назад
- 29 просмотров
0

ответов
Vue.js

Простой
Как получить событие клика в updated()?
- 1 подписчик
- 19 апр.
- 43 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как использовать хуки NUXT в модулях?
- 1 подписчик
- 19 апр.
- 56 просмотров
1

ответ
Vue.js

Простой
Как решить проблему с логикой валидации после перезагрузки страницы в Vue.js?
- 1 подписчик
- 19 апр.
- 49 просмотров
0

ответов
Vue.js

Средний
Как сделать светлую тему по дефолту во Vueform?
- 1 подписчик
- 18 апр.
- 62 просмотра
2

ответа
Vue.js

Средний
Как разрешить пути к SVG во Vue-проекте?
- 1 подписчик
- 18 апр.
- 62 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 18 апр.
- 106 просмотров
0

ответов
Vue.js

Простой
Как грамотно реализовать поисковую строку?
- 1 подписчик
- 18 апр.
- 84 просмотра
1

ответ
Vue.js

Простой
Не работают @media-query на Vue 2, как исправить?
- нет подписчиков
- 17 апр.
- 55 просмотров
0

ответов
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Senior Frontend VueJS (частичная занятость)

Онград+

от 125 000 ₽

SMM для HR

23 апр. 2024, в 08:58

15000 руб./за проект

[python] протестировать function calling у gpt-4 и у claude 3 opus

23 апр. 2024, в 08:50

200 руб./за проект

Разработка кроссплатформенного приложения

23 апр. 2024, в 08:42

60 руб./за проект

код компонента почему то не попал в спойлер
<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 · 2019-02-13 22:00:16

Алексей Ярков @yarkov Куратор тега Vue.js

Помог ответ? Отметь решением.

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

Ответ написан более трёх лет назад

3 комментария

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

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

Минуточку внимания

Войдите на сайт