Modals and results

Mark a route with modal: true, or pass ModalOptions (fullscreen, animated, cancelable, ios.presentationStyle…):

{ path: '/compose', component: Compose, modal: { fullscreen: true } }

router.push('/compose') presents it inside its own frame, so it has an ActionBar and its own stack. Pages inside push within the modal. router.back() from the first page of the modal closes it. Swiping it down, tapping outside or pressing the Android back button closes it too, through the leave guards of its pages. The router follows along and runs afterEach.

push also takes modal as an option, to present any route modally regardless of what its record says.

Getting a result back

A page can return a value to whoever opened it. This works with modals and with plain pages:

// Message.vue
const reply = await router.pushForResult<string>('/compose')
if (reply) send(reply)

// Compose.vue
router.back({ result: text.value })

If the page closes any other way (a swipe, the back button) or a guard stops it from opening, the promise resolves with undefined.