[Vue]"page:beforeout(or afterout)" in <f7-page> not trigger when leave

Questions
1

Set @page:afterout&beforeout in <f7-page>, but cannot be trigger at first when page leave

<f7-page name=“catalog” @page:beforein=“beforeIn” @page:afterout=“afterOut”
@page:beforeout=“beforeOut”> </f7-page>

But set in routes can be trigger, when page leave

const routes = [
    {
        path: '/catalog',
        async(routeTo, routeFrom, resolve, reject) {
            import('@/pages/catalog/catalog.vue').then((vc) => {
                resolve({ component: vc.default })
            });
        },
        options: {
            animate: false,
        },
        on: {
            pageBeforeOut(event, page) {
                console.log('page pageBeforeOut');
            },
            pageAfterOut(event, page) {
                console.log('page pageAfterOut');
            }
        }
    }
]

That’s so weird…
Are these two methods different?

2

Can’t see such issue in latest f7 version

3

I have used the latest version (5.1.3) now. But still have this issue…

In root App template is:

<f7-view class=“safe-areas” main url="/" :push-state=“true” push-state-separator></f7-view>

routes has 3 pages: Page A(/), Page B (/b), Page C (/c)
In page B

<f7-page name=“B” @page:afterout=“afterOut” @page:beforeout=“beforeOut”></f7-page>

The first operate situation:

  1. first in Page A
  2. go page B
  3. go page A (pageB’s afterOut & beforeOut not called)
  4. go page C (pageB’s afterOut & beforeOut be called)

The second operate situation:

  1. first in Page A
  2. go page B
  3. use “back” Back to Page A (pageB’s afterOut & beforeOut be called)

I am worried if I understand the error… Is the first situation normal?

4

Can you create some minimal live example or JSFiddle with the issue as i still can’t replicate it

5

Please see the link below :slight_smile:

f7-vue-page-issue

6

@nolimits4web Could you please help look? thanks.

7

Ok, found issue in code with it. Pushed fix, will be available in next update