Задать вопрос
@paper_castle
Фрилансер

Как сделать роутинг для модального окна в Vue.js?

Есть реализация с модальными окнами, нужны динамические модальные окна с роутами вроде /product/:id
Текущая реализация включает библиотеку vue-final-modal, с готовым роутингом видел genesis-vue-modal, но переходить с ради роутинга на другую либу выглядит не очень рациональным (как и своя реализация модальных окон).

Мб кто знает готовую реализацию на базе vue-final-modal?
  • Вопрос задан
  • 99 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
victormayorov
@victormayorov
Frontend разработчик
В router/index.js
{
    path: '/products/:id',
    name: 'ProductModal',
    component: Categories,// указываем компонент страницы с которой и осуществляется переход
 },


Далее в Categories.vue
<!-- тут условно какие карточки по клику открывают модальное окно -->
<!-- @click="openProduct(product.id)" -->
<vue-final-modal v-if="isModalOpen" @close="closeModal">...</vue-final-modal>

import { ref, watch } from 'vue';
    import { useRoute, useRouter } from 'vue-router';

    const isModalOpen = ref(false);
    const currentProductId = ref(null);

    const openProduct = (id) => {
      currentProductId.value = id;
      isModalOpen.value = true;
      router.push(`/products/${id}`);
    };

    const closeModal = () => {
      isModalOpen.value = false;
      currentProductId.value = null;
      router.push('/products'); // Возвращаемся к списку
    };

    // Отслеживание изменения маршрута
    watch(
      () => route.params.id,
      (id) => {
        if (id) {
          currentProductId.value = id;
          isModalOpen.value = true;
        } else {
          isModalOpen.value = false;
        }
      },
      { immediate: true }
    );


не проверял, но если нужно примерно решение из того, что вы написали в комментарии к этому ответу, то как-то так.
если в двух словах, то при клике мы перенаправляем юзера на туже самую страницу, но с другим адресом и т.к. указан id,в ватчере сработает проверка и откроется модальное окно.
при клике на карточку товара откроется сразу модальное окно и при переходе на другую страницу будет открыто модальное окно(конечно, будет виден эффект этого перехода)
можно еще попробовать через хуки роутера это провернуть, но мне кажется это уж больно все костыльно будет, я б так не делал.
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
А что мешает сделать компонент окна дочерним роутом к product?
Ответ написан
Ваш ответ на вопрос

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

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