Закрытие модального окна с помощью vue-router

По умолчанию модальное окно не закрывается при изменении пути (vue-router). Это было сделано намеренно, потому что в вашем проекте может не быть этой библиотеки или какой-либо другой для работы с маршрутами. Также это функция не тяжёлая даже для программиста начального уровня.

Vue Router

Для закрытия модального окна с помощью библиотеки vue-router нужно прописать следующий хук:

import {getCurrentModal, closeModal} from "jenesius-vue-modal";

const router = new VueRouter({...})

router.beforeEach(async (to, from, next) => {
    // Есть ли открытые окна
    if (getCurrentModal()) { // (1)
        try {
            await closeModal(); // (2)
            next(); // (3)
        } catch (e) {
            // ...
            next(false); // (4)
        }
    } else next();
})

Давайте посмотрим, что здесь происходит:

• (1) - Если текущее модальное окно не undefined, нам нужно закрыть все модальные окна (2).
• (3) - Если закрытие прошло успешно, то подтверждаем переход на следующий маршрут.
• (4) - Отключаем переход, если closeModal выдал ошибку (модальное окно осталось открытым).