Open a modal on Vue.js route change

Question

Currently, my vue-router configuration looks like this:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    }
  ],
});

Now, I want to define a new path, say /some-modal-path, on navigation to which, a modal, sayModalComponent, will open as an overlay above the current component.

Is this possible to be done with vue-router? If yes, how can it be done?

Answer 1

Fast solution

Put <router-view> in each component

export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        },
        {
          path: '/settings',
          name: 'settings',
          component: Settings,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        }
      ],
    });