Tabs not changing when pressing Toolbar links after routing #302

When i’m on an page of my app, I can swipe and hit the toolbar links to change from tab. As soon as I change the route (going to another page and coming back to the same page) the swiping is still working but I have the following issue’s:

  • I can’t hit the toolbar links to change from tab
  • Every animation/moving part of the app is frozen but the actions do happen in the background (contacting the api when a component is done spinning)

You can see the first part happen in this video:
This issue also happened for this user:

This is the used code:

Page that was shown first in the video

<f7-page name="offers">
        <f7-navbar sliding no-shadow>
                <f7-link icon="icon-bars" open-panel="left"></f7-link>
                <div class="nav-balance">
                <div class="nav-points">
                    {{ points }}

        <f7-toolbar tabbar noShadow>
            <f7-link tab-link="#offers" active>Offers</f7-link>
            <f7-link tab-link="#fortuneWheel">Fortune Wheel</f7-link>
            <f7-link tab-link="#rewards">Rewards</f7-link>

        <f7-tabs swipeable>
            <f7-page-content tab id="offers" @tab:show="tabChanged('offers')" active>
                <offers-tab :active-tab="active_tab"></offers-tab>

            <f7-page-content tab id="fortuneWheel" @tab:show="tabChanged('fortuneWheel')">
                <fortune-wheel-tab :active-tab="active_tab"></fortune-wheel-tab>

            <f7-page-content tab id="rewards" @tab:show="tabChanged('rewards')">
                <rewards-tab :active-tab="active_tab"></rewards-tab>


If any code is needed to fix the issue, let me know

versions used:

  • framework7: “1.6.5”
  • framework7-vue: “0.9.4”
  • vue: “2.5.13”