Модальные окна в SPA

29 сентября 2021, 07:00

Vue JS. Есть таблица со списком работников. При нажатии на работника открывается модальное окно с детальной информации о нём. Всё так и работает. Но необходимо, чтобы существовала ссылка для работника. Сама таблица доступна по роуту:

/peoples/10/1

Хотелось бы, чтобы при открытии модального окна ссылка превращалась в:

/peoples/10/1/show/551

Для этого я сделал вот такой конфиг, c props=true:

/peoples/:type/:company?(/show/)?:peopleId?

И всё впринципе работает. Только вот не знаю как передать /show/ в

router.push({name:'Peoples', params...})

Также потом я придумал способ с children route. Родительским будет являться сам Peoples, а просмотр конкретного работника это его дочерний роут (и компонент для него с модалкой). Но всё равно остаётся проблема с URL, с этим /show/. Можно ли как то для дочерних роутов делать, чтобы они наследовали path у родителя?

Или может вообще всё можно сделать проще?

Answer 1

Да, в этой ситуации самое правильно делать children view и модальное окно в отдельном Vue компоненте. И добавлять на страницу, где открывается модалка . При такой схеме не будет вообще никаких проблем связанных с передачей параметров. При закрытии модального окна просто берете parentRoute с текущими параметрами и URL без проблем изменится, при этом родительский компонент не будет перезагружаться.

Если начинать делать изменения в URL в обход Vue, то получатся костыли. И придётся всё продумывать. Если есть инструмент для роутинга, нужно использовать его возможности. Пробовал по-разному, и этот вариант оказался самым не больным. Модальные окна стали просто как отдельным single page, по архитектуре это весьма логично.