Remember last tab of tab-router

I have a view with 2 pages: master and detail page.
The detail page consists of 3 tabs (routable tabs).

When I click a link in master page (from a link-list),
the router navigates to detail page and starts with “Tab 1”.

Now I want to have something like this:

When user clicks from “Tab 1” to "Tab 2"
and navigates back (with back button) to master page
and click again another link-list-item, then the router should route the user directly to “Tab 2” instead of “Tab 1”.

Does F7 has something like that build in. Can I do this with view history or the like?

looks like there is no build-in
but you can try this

  • go to “Tabs”
  • go to “Routable Tabs”
  • click “Tab 3”
  • go back to “Tabs”


  • you are in “Tab 3”


However, I cannot set pushState=true on mainView because if I set it to true, then my all my f7-components do not render (blank site) (Init page on multi view layout). I dont know why…

Any other solution besides pushState?

Well, it is pretty tricky. The easiest way i see is to:

  • store somewhere last tab index, for example on tab:show event, save the tab index to
  • handle master page links manually, e.g:
<a href="#" @click="navigateToDetailPage">
navigateToDetailPage() {
  if ( === 2) app.views.main.router.navigate('/details/tab2/');
  else app.views.main.router.navigate('/details/');
1 Like

Thanks. your solution works, however as I have to use async, I use this code which also works:

name: "detail",
path: "/detail/",
async(routeTo, routeFrom, resolve, reject) {
let routeToTab =;
// Remember last tab = != undefined ? : routeToTab;

if( == "master") {
    routeToTab =;

if(routeToTab == "tab-1") {
resolve({ component: tab1 })

If its worth, you can consider to support this within f7 with a new property (“rememberLastTab” or “goToLastTab”).