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

Однако, на мой взгляд, каждый из них имеет свои минусы, например:

• в случае изложенном на офф сайте компоненты нужно создавать отдельную переменную и привязываться к ней;
• во второй статье рассматриваются решения сторонних разработчиков. В этом случае нужно потратить время и разобраться как использовать эти компоненты + лишние, на мой взгляд, зависимости в проект. А я придерживаюсь позиции: чем проще, тем лучше.

Опять же, я всего знать не могу, поэтому, если если у вас есть что сказать или отметить, то я открыт к конструктивной критике. Далее мы будем использовать исключительно стандартный функционал инструментов, которые используем (Vue, VueRouter, Bootstrap Modal). Итак, ближе к делу…

Найдутся люди, которые скажут: «лучше подключить npm-зависимости для modal, чем тянуть весь bootstкap + jquery.». Товарищи, вам никто не мешает все это дело адаптировать под ваши нужды и инструменты. Приведенные инструменты лишь пример реализации.

Сразу рабочий вариант.

<div id="app">   <nav>     <router-link :to="{ name: 'modal' }" exact>Open Modal</router-link>   </nav>      <router-view></router-view> </div> 

Vue.use(VueRouter)  const Modal = { 	template: `<div class="modal fade" tabindex="-1" role="dialog" ref="modal">   <div class="modal-dialog" role="document">     <div class="modal-content">       <div class="modal-header">         <h5 class="modal-title">Modal title</h5>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">           <span aria-hidden="true">×</span>         </button>       </div>       <div class="modal-body">         <p>Modal body text goes here.</p>       </div>       <div class="modal-footer">         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>       </div>     </div>   </div> </div> mounted: function(){ 	console.log('mounted')  	var context = this;  	$(this.$refs.modal).modal('show')      $(this.$refs.modal).on('hidden.bs.modal', function(){   	context.$router.go(-1);   }) } }   const routes = [   { path: '/modal', name: 'modal', component: Modal }, ]  const router = new VueRouter({ 	routes, })  // New VueJS instance var app = new Vue({ 	// CSS selector of the root DOM element   el: '#app',   // Inject the router into the app   router, }) 

Собственно, здесь нет ничего сложного.

1. При переходе по нашей ссылке, монтируется наш компонент Modal.
2. При его монтировании мы открываем наше модальное окно и через this.$refs отслеживаем его закрытие.
3. При его закрытии мы программно возвращаем человека на шаг назад, чтобы наш компонент отмонтировался.

Таким образом, такой подход и такая структура неплохое решение, если у вас в проекте планируется много модальных окон со своей отдельной логикой:

• легкая кастомизация;
• не нужно подгружать сторонние зависимости. Лично для меня чем проще, тем лучше;