Отображение нескольких компонентов маршрутизатора в одном представлении на рабочем столе - PullRequest
Новая
       5

Отображение нескольких компонентов маршрутизатора в одном представлении на рабочем столе

1 голос
/ 06 февраля 2020

Я использую vue. js для создания PWA. Несмотря на то, что это не настольное браузерное приложение, я подумываю о том, как лучше использовать ненужную недвижимость, объединяя несколько представлений в одно увеличенное.

Например, на мобильных устройствах, Есть 2 вида с различными маршрутами - Выберите Аутлет и Заказ. Есть ли способ объединить оба этих вида только для рабочего стола с минимальными изменениями? Спасибо!

1 Ответ

0 голосов
/ 06 февраля 2020

Аннотация

У меня есть предложение решения. Не уверен, удовлетворит ли он вас, но, может быть, он по крайней мере даст вам новую перспективу.

Пример

Настройка маршрутизатора: 

const routes = [
{
    path: '/combined-components',
    name: 'CombinedComponents',
    components: {
        default: WrapperComponent,
        'firs-component': SelectOutlet,
        'second-component': OrderItems
    },
}]

Настройка шаблона: 

         <div class="wrapper-component">
            <div class="container">
               <div class="first-component">
                 <router-view name="first-component"></router-view>
               </div>
                <div v-if="isMobile" class="second-component">
                 <router-view name="second-component"></router-view>
               </div>
            </div>
         <div>

Пояснение

Используя атрибут name для <router-view>, мы можем решить, какой компонент будет отображаться в зависимости от текущего маршрута. Таким образом, у нас есть один родительский компонент в этом случае WrapperComponent, и внутри его шаблона мы можем свободно разместить другой <router-view>, а в routes.js (или просто в маршрутах const, которые вы передаете для настройки маршрутизатора) вы можете указать, каким компонентом вы хотите быть помещается в слот first-component и second-component. Это позволяет объединить 2 из них и просто продолжить дальнейшие маршруты, не выходя из WrapperComponent. Что нужно сделать, это определить, следует ли отображать второй компонент или нет. В зависимости от isMobile, который вы можете определить самостоятельно (я бы предположил, исходя из ширины экрана).

Документы

Подробнее читайте здесь: Vue Документы маршрутизатора

Резюме

В этом подходе он работает с другой стороны. Вы готовите его для рабочего стола и просто ограничиваете его для мобильных устройств.

...