Vue render component as modal in specific route if route metadata key is set to true

Viewed 1224

I'm using vue-router and i'm trying to create a functionality as follows:

I want to be able to specify in the router routes if a component should be rendered in modal or not. And if it is rendered in Modal keep every component below ( under modal-mask ) as it was. I've created a modal-wrapper component that have basic modal structure and slot inside its modal body so the component I want to render should go in the slot. But how to achieve that. Does Vue-Router have options for that functioanlity.

Router routes:

{
  path: '/customers/:clientId',
  component: customerView
  meta: {
    auth: true,
  },
},
{
  path: '/customers/:clientId/addAddress',
  component: dataViewAdd
  meta: {
    openInModal: true,
    auth: true,
  },
},

Since if component should be rendered inside modal while overlaying the previous router-view, I guess ill need 2 router-views.

<router-view class="normal-view"></router-view>
<router-view class="modal-view" name="modal-view"></router-view>
1 Answers
Related