Control modals using vue router
<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>