Есть ли способ отображать несколько дисплеев на одной странице (разные части страницы) с помощью vuetify или простого vuejs

#vue.js #vuetify.js

Вопрос:

Просто хочу знать, возможно ли отображать разные страницы на одной странице. Может быть, как в виде разделенной панели. Например, я хочу иметь страницу с четырьмя равными пробелами (например, разделенную на четыре поля), и я хочу динамически изменять содержимое каждого из этих полей на основе событий, которые происходят в других полях (просто приблизительное изображение). Возможно ли это? И как?

Заранее спасибо!

1. что вы имеете в виду, как разные маршруты на одной странице?

2. @JenuelGanawed. ДА. Я хочу изменить то, какие страницы динамически монтируются на этих маршрутах. Прямо сейчас вам нужно определить, какие страницы смонтированы на этих маршрутах вручную в router.js но я хочу изменить конфигурацию из кода, допустим, при нажатии кнопки на другой странице в пределах того же родительского маршрута.

Ответ №1:

Vuetify включает в себя сеточную систему, которая предоставляет row элементы column для создания практически любого макета. Пожалуйста, взгляните на множество примеров на странице docs, чтобы узнать, как создать, например, макет с 2 строками и 2 столбцами.

1. Спасибо за ответ @NoahStahl. Хотя то, что я действительно хочу сделать, это динамически изменять пользователей разных порталов просмотра маршрутизатора, например, нажатием кнопки на другом компоненте просмотра маршрутизатора.

Ответ №2:

Я думаю, вы можете использовать flex, и если вы хотите использовать маршрутизации, тогда вы действительно можете настроить свой файл маршрутизатора.

пример кода здесь https://codesandbox.io/s/xenodochial-hermann-sui9z

 <div class="container">
    <div class="boxes">
      <div class="pages p1">
        <router-view name="p1"></router-view>
      </div>
      <div class="pages p2">
        <router-view name="p2"></router-view>
      </div>
    </div>
    <div class="boxes">
      <div class="pages p3">
        <router-view name="p3"></router-view>
      </div>
      <div class="pages p4">
        <router-view name="p4"></router-view>
      </div>
    </div>
  </div>

1. Вау! Спасибо, @JenuelGanawed Да, точно. Но теперь трюк, который я хочу выполнить, заключается в том, чтобы изменить, скажем, страницу 2 на страницу 10, когда я нажимаю кнопку на странице 3 — все динамически, а не по ручному определению в router.js

Ответ №3:

Если то, что вы ищете, — это динамическое добавление компонентов, вы можете использовать Vue <component/> . Использование примерно такое:

 <component :is="MyComponent"/>

 import MyComponent from "@/components/MyComponent";

export default {
  ...
}

Вот пример демонстрации.

1. Привет @Blackraspberryyyy. Большое спасибо за это! Я полагаю, что один из способов добиться желаемого — использовать этот метод и изменять элементы в массиве страниц в объекте данных, а не в зависимости от router-view, чтобы иметь возможность изменять его динамически. Теперь это имеет смысл. Еще раз спасибо!