Remember last tab of tab-router

Questions
1

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?

2

looks like there is no build-in
but you can try this
http://framework7.io/kitchen-sink/
console:
app.views.main.params.pushState=true;

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

console:
window.history.forward();

  • you are in “Tab 3”
3

thanks.

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?

4

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 app.data.currentTab
  • handle master page links manually, e.g:
<a href="#" @click="navigateToDetailPage">

navigateToDetailPage() {
  if (app.data.currentTab === 2) app.views.main.router.navigate('/details/tab2/');
  else app.views.main.router.navigate('/details/');
}
1 Like
5

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 = routeTo.route.tab.id;
// Remember last tab
app.data.lastTab = routeFrom.route.tab != undefined ? routeFrom.route.tab.id : routeToTab;

if(routeFrom.name == "master") {
    routeToTab = app.data.lastTab;
}

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”).