[Framework7-Vue V2] async route with component

Questions
1

I have an app with 4 pages: page1~page4.
I use async route for page2, page3, and page4.
page4 is a sheet modal.
(I want to use routable modal, but it seems that Framework7-Vue does not support routable modal with Vue component so far.
So I made one for myself.)
Page4 looks like following:

<template>
  <f7-page
    style="background-color: rgba(0, 0, 0, 0);"
    @page:back="beforePageBack()">
    <f7-sheet
      :opened="sheetOpen"
      @sheet:close="hideSheet">
      <f7-toolbar>
        <f7-link>Title</f7-link>
        <f7-link @click="hideSheet">Close</f7-link>
      </f7-toolbar>
      something
    </f7-sheet>
  </f7-page>
</template>

<script>
export default {
  name: 'Sheet',
  data () {
    return {
      sheetOpen: false
    }
  },
  mounted () {
    this.sheetOpen = true
  },
  methods: {
    beforePageBack (v) {
      this.sheetOpen = false
    },
    hideSheet () {
      this.sheetOpen = false
      this.$f7router.back()
    }
  }
}
</script>

After user clicked “hideSheet”
The browser show the error:

Uncaught TypeError: Cannot read property 'removeChild' of null
    at Router.removePage (framework7-vue.esm.bundle.js?8e71:168)
    at afterAnimation (framework7.esm.bundle.js?c501:4131)
    at eval (framework7.esm.bundle.js?c501:4148)
    at onDone (framework7.esm.bundle.js?c501:4643)
    at HTMLDivElement.eval (framework7.esm.bundle.js?c501:4643)
    at HTMLDivElement.fireCallBack (dom7.module.js?d8c4:456)
    at HTMLDivElement.handleEvent (dom7.module.js?d8c4:321)

If I change the router setting of page 2 from

{
  path: '/page2',
  async: someFunction(Page2)
}

back to

{
  path: '/page2',
  component: Page2
}

then the error would not occur.

How should I fix this?
Thank you!

2

F7-Vue supports routable modals since v2.2.0. It wasn’t yet documented. But the usage is the following:

<div id="app">
  <f7-panel ...>...</f7-panel>
  <f7-view ...></f7-view>
  <!-- Must be empty component in app root -->
  <f7-routable-modals></f7-routable-modals>
</div>

So you need to add empty f7-routable-modals component to the app root, that is all, after that it should work

1 Like
3

Thanks
It works :slight_smile: