[Framework7-Vue V2] async route with component

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:

    style="background-color: rgba(0, 0, 0, 0);"
        <f7-link @click="hideSheet">Close</f7-link>

export default {
  name: 'Sheet',
  data () {
    return {
      sheetOpen: false
  mounted () {
    this.sheetOpen = true
  methods: {
    beforePageBack (v) {
      this.sheetOpen = false
    hideSheet () {
      this.sheetOpen = false

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!

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

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

1 Like

It works :slight_smile: