title: Control modals using vue router
body: <p>I am working in the project developed with Vue 2 with VueRouter and I am trying to work with my modals controlled by my VueRouter!</p>
  
  <p><strong>I've done the following code</strong></p>
  
  <p><strong>Main vue component</strong>: My normal components will be loaded on the default router-view and all my modals will be loaded on the modal router-view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;router-view v-if="!isLoading"&gt;&lt;/router-view&gt;
    &lt;router-view v-if="!isLoading" name="modal"&gt;&lt;/router-view&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>RoutedModals</strong> Mixing
  As you can see on my beforeRouteEnter method I am checking if there is a previous "from" route (which means the user got the page navigating inside the app)... If it's I set that one as default component... if not (which means the user got directly from the URL) I set my dashboard as default and it will be opened behind my modal.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Dashboard from 'modules/dashboard/components/Main.vue'
  import { isNil } from 'lodash'
  
  export default {
    data() {
        return {
          canAccessDirect: true,
          goBackTo: '/'
        }
      },
      beforeRouteEnter(to, from, next) {
        to.matched[0].components.default = isNil(from.matched[0]) ? Dashboard : from.matched[0].components.default
  
        next(vm =&gt; {
          if (!vm.canAccessDirect)
            vm.$router.push({
              name: 'dashboard.index'
            })
  
          vm.fetchRecords()
          vm.goBackTo = from.path
          window.jQuery(vm.$el).modal('show')
          window.jQuery(vm.$el).on('hide.bs.modal', () =&gt; {
            vm.$router.push(vm.goBackTo)
          })
        })
      },
      beforeRouteLeave(to, from, next) {
        setTimeout(() =&gt; {
          next()
        }, 200)
      },
      methods: {
        fetchRecords() {
          // Do list request
        }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>An example of my router object</strong>: The first route will open a modal on the router-view modal and the second will open only on the default router-view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    name: 'leads.quick-add',
    path: '/leads/quick-add',
    components: { modal: QuickAdd },
  }, 
  {
    name: 'leads.index',
    path: '/leads',
    component: Main,
  },</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works great! The problem comes when I access my modal URL (does not matter if it's directly or navigating) and the default component has a child component! The child component get away on that case!</p>
  
  <p>There is attached some screenshots to help you out understand what happens...</p>
  
  <p><strong>Image 1</strong>
  <a href="https://i.stack.imgur.com/hjJnr.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hjJnr.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Image 2</strong>
  <a href="https://i.stack.imgur.com/YOu5M.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/YOu5M.jpg" alt="enter image description here"></a></p>
  
  <p>At Image 1 we can 2 components where the number 1 is my default component on my VueRouter and the number 2 is his child!</p>
  
  <p>Ar the Image 2, after clicking on the + Quotation button the modal is loaded and the component number 2 getaway!</p>
  
  <p>Any ideas on how to do it keeping the others components?</p>
  
  <p><strong>Just to be clear I want to do it by routing and no calling my modal manually!</strong></p>
  
  <p><strong>########################## Edit</strong>
  I am trying to do something like that instead of check on beforeRouterEnter method:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    name: 'leads.show.quotations.create',
    path: '/leads/:id/quotations/create',
    components: {
      default: Show,
      'default.tab': Quotations,
      modal: Add
    },
    meta: {
      requiresAuth: true
    }
  },</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where there is a sub-router-view but it does not work!</p>
  
  <p>Thinking about possibilities I've added this issue on the github repo:
  <a href="https://github.com/vuejs/vue-router/issues/1030" rel="noreferrer">https://github.com/vuejs/vue-router/issues/1030</a></p>