Control modals using vue router

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!

I've done the following code

Main vue component: My normal components will be loaded on the default router-view and all my modals will be loaded on the modal router-view

<div id="app">
  <router-view v-if="!isLoading"></router-view>
  <router-view v-if="!isLoading" name="modal"></router-view>

RoutedModals 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.

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 => {
        if (!vm.canAccessDirect)
            name: 'dashboard.index'

        vm.goBackTo = from.path
        window.jQuery(vm.$el).on('', () => {
    beforeRouteLeave(to, from, next) {
      setTimeout(() => {
      }, 200)
    methods: {
      fetchRecords() {
        // Do list request

An example of my router object: The first route will open a modal on the router-view modal and the second will open only on the default router-view

  name: 'leads.quick-add',
  path: '/leads/quick-add',
  components: { modal: QuickAdd },
  name: 'leads.index',
  path: '/leads',
  component: Main,

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!

There is attached some screenshots to help you out understand what happens...

Image 1 enter image description here

Image 2 enter image description here

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!

Ar the Image 2, after clicking on the + Quotation button the modal is loaded and the component number 2 getaway!

Any ideas on how to do it keeping the others components?

Just to be clear I want to do it by routing and no calling my modal manually!

########################## Edit I am trying to do something like that instead of check on beforeRouterEnter method:

  name: '',
  path: '/leads/:id/quotations/create',
  components: {
    default: Show,
    '': Quotations,
    modal: Add
  meta: {
    requiresAuth: true

Where there is a sub-router-view but it does not work!

Thinking about possibilities I've added this issue on the github repo:



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.