Using Multiple Framework7 Views for Independent Navigation Stacks

When to use separate Framework7 Views

When your app uses a tab bar or split‑screen layout, each tab often needs its own navigation history so that pressing the browser back button returns to the previous page inside the same tab rather than jumping to another tab.

Defining routes per view

Framework7 lets you attach a routes array to each View instance. Routes defined this way are only consulted when navigation originates from that view, keeping the stack isolated.

Worked example: tabbed app with two views

Below is a minimal setup that creates two tabs, each with its own View and route set. Place the script after the Framework7 library has loaded.

document.addEventListener('DOMContentLoaded', function () {
  const app = new Framework7({
    root: '#app',
    id: 'com.example.app',
    theme: 'auto'
  });

  // Tab 1 view
  const view1 = app.views.create('.view.tab1', {
    url: '/',
    routes: [
      { path: '/', componentUrl: 'pages/home.html' },
      { path: '/detail/:id', componentUrl: 'pages/detail.html', props: { id: 'id' } }
    ]
  });

  // Tab 2 view
  const view2 = app.views.create('.view.tab2', {
    url: '/tab2/',
    routes: [
      { path: '/', componentUrl: 'pages/settings.html' },
      { path: '/profile/:userId', componentUrl: 'pages/profile.html', props: { userId: 'userId' } }
    ]
  });

  // Switch tabs via the toolbar (Framework7 handles this automatically)
});

HTML structure (simplified):

<div id='app'>
  <div class='toolbar tabbar'>
    <a href='.view.tab1' class='tab-link active'>Tab 1</a>
    <a href='.view.tab2' class='tab-link'>Tab 2</a>
  </div>
  <div class='views tabs'>
    <div class='view tab1 tab active'><div class='page'></div></div>
    <div class='view tab2 tab'><div class='page'></div></div>
  </div>
</div>

Verification steps:

1. Open the app in a browser and click the Tab 2 link.
2. Notice the URL changes to something like #/tab2/ (Framework7 uses the hash by default).
3. Navigate inside Tab 2 to a profile page, e.g. by clicking a link that calls view2.router.navigate('/profile/42').
4. Press the browser back button – the URL should revert to #/tab2/ and the settings page reappears, while Tab 1’s stack remains untouched.
5. Open DevTools → Application → Session Storage (or just watch the URL) to confirm that each view’s router maintains its own history array.

Limits and common mistakes:

• Duplicate route definitions: if you define the same path in both a global routes array (passed to the Framework7 constructor) and a view‑specific routes, the global router may intercept the navigation before the view’s router gets a chance, leading to unexpected page loads.
• Over‑nesting views: placing a View inside another View’s page creates a second navigation stack that is not automatically linked to the tab bar, making back navigation confusing.
• Memory leaks: page components that attach global event listeners (e.g., window.addEventListener) must remove them in the beforeRemove callback; otherwise frequent tab switches accumulate listeners.
• Assuming the browser’s back button works across views: it only pops the stack of the view that initiated the navigation. To synchronize tabs you would need to manually manage the history API, which is usually unnecessary.

Practical way to check the result: after performing the verification steps above, open the console and type app.views. You will see an array of View objects; each View’s router.history length reflects only the pages visited inside that view.