В 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,в ватчере сработает проверка и откроется модальное окно.
при клике на карточку товара откроется сразу модальное окно и при переходе на другую страницу будет открыто модальное окно(конечно, будет виден эффект этого перехода)
можно еще попробовать через хуки роутера это провернуть, но мне кажется это уж больно все костыльно будет, я б так не делал.