VueJs + VueRouter + modal. Очередной велосипед

[HeTpe3B]

Рендерить jQuery с помощью Vue?)

[Tantacula]

Я правильно понял, что вы не захотели подключать сторонние библиотеки, но подключили бутстрап и jquery, чтобы написать свой код?

[juDge]

Знатное извращение… если надо логику степ бай степ… то зачем нужно модальное окно вообще?… можно просто отслеживать историю хождений и тп

[krendel122]

— var в 2019 году
— jquery + $refs
— модалка заменит содержимое текущей страницы в router-view, а не просто отрендерится поверх
— переиспользовать невозможно, где хотя бы слоты для контента?
— перезагрузка страницы на урле модалки при закрытии куда юзера кинет?

[moxy]

• var в 2019 году — да, представляете какой я старый?!) На самом деле Вы действительно считаете это критичным?;
• jquery + $refs — в статье отмечено, что это лишь пример реализации. В ваших проектах, наверняка, используются другие kit-ы;
• модалка заменит содержимое текущей страницы в router-view, а не просто отрендерится поверх — Вы пример-то смотрели?;
• переиспользовать невозможно, где хотя бы слоты для контента — в моей задумке ( каждое отдельное окно — это отдельный уникальный компонент со своей логикой, кодом и структурой. Мне видится, что «переиспользовать» здесь ни к месту;
• перезагрузка страницы на урле модалки при закрытии куда юзера кинет? — Вы пример смотрели?

Считаю, объективней было бы с вашей стороны сделать свою улучшенную реализацию и поделиться ею в комментах.

[SteveLeo]

По пункту 3. Я правильно понимаю, Вы предлагаете писать отдельный роут для каждого модального окна и добавлять на каждую страницу где используется модальное окно <router-view>? Без <router-view> всегда будет происходить перересовка основного контента страницы jsfiddle.net/leos0331/4L8wvh3y.

[ejanger]

Если я правильно понял задачу, то делал что-то подобное на днях. Пример. Компонент окна брал из element-ui. В вашей реализации смущает использование $router.go(-1). Получается, если открыть модальное окно по прямой ссылке, то при его закрытии не поменяется url.

[userNCh]

Вы не по назначению используйте router-link. Оно, конечно, у вас работать будет, но другие разработчики после вас увидев в коде router-link сразу не догадаются, что это просто кнопка для раскрытия модалки. router-link всё-таки это про переходы на другие страницы сайта. Для раскрытия модалки (с точки зрения семантики) лучше применять button.

[CyberAP]

В чём проблема с тем чтобы привязать модальное окно к модулю Vuex и использовать middleware роутера?
Вешать логику роутера на модальное окно — это грубое наршение SRP. Появилась ненужная связь модального окна и роутера, такой код будет невозможно поддерживать.
Использование Vuex избавит вас от глобальных переменных и позволит более гибко контролировать поведение модального окна.
Вам правильно подсказали что такой подход будет перезагружать страницу. У вас на начальной странице ничего нет. Попробуйте добавить туда что-нибудь и увидите как при каждом закрытии окна весь контент рендрится заново. (пример: https://jsfiddle.net/uyqmL7ro/)

[parmactep]

Возвращать на шаг назад в истории — так себе решение. А если я по внешней ссылке перешёл?