How to keep routable tab content after navigations

Questions
1

F7 Version: v8.3.0

Code:


//app.js
const routes = [
  {
    path: '/',
    url: './pages/layout.html',
    tabs: [
      {
        path: '/',
        id: 'tab-1',
        componentUrl: './pages/home.html',
      },
      {
        path: '/tab-2/',
        id: 'tab-2',
        componentUrl: './pages/tab.html',
      },
      {
        path: '/tab-3/',
        id: 'tab-3',
        componentUrl: './pages/user.html',
      },
    ],
    keepAlive: true
  }

  //other routes...

]

const app = new Framework7({
  el: '#app',
  view: {
    iosSwipeBack: false,
    xhrCache: false,
    unloadTabContent: false,
  },
  routes: routes,
})

//layout.html
<div class="page no-navbar">
  <div class="toolbar tabbar toolbar-bottom page-tabbar">
    <div class="toolbar-inner">
      <a href="/" class="tab-link" data-route-tab-id="tab-1">
        <i class="icon-line2-home"></i>
        <span>Home</span>
      </a>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">
        <i class="icon-line2-emoticon-smile"></i>
        <span>Tab</span>
      </a>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">
        <i class="icon-line2-user"></i>
        <span>User</span>
      </a>
    </div>
  </div>
  <div class="tabs tabs-routable tabs-swipeable-wrap">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
  </div>
</div>

Steps:

  1. Switch to tab-3, navigate 2 new routes on that page (2 page level deeper).
  2. Navigate back to the root Tabs page.
  3. Problem occurs:
    ● tab-3 is active (OK)
    ● Content of tab-3 gets removed (NOT OK)
    Now switch to tab-1 OR tab-2:
    ● Content of tab-1 AND tab-2 gets removed, event “tabInit” fires (NOT OK)

Question:
How to keep tab-1 & tab-2 & tab-3 state after deep navigation.
I tried to set keepAlive: true && unloadTabContent: false with no luck.

Any help is appreciated!

2

Solved. Switched to Tabbed Views layout.