[v2] combine routable tabs with pushState

1

[v2] combine routable tabs with pushState not working

var routes = [
{
path: ‘/’,
url: ‘./index.html’,
tabs: [
{
path: ‘/’,
id: ‘home’,
componentUrl: ‘./pages/home.html’,
},
{
path: ‘/product/’,
id: ‘product’,
componentUrl: ‘./pages/product.html’,
},
{
path: ‘/user/’,
id: ‘user’,
componentUrl: ‘./pages/user.html’,
}
],
},

var app = new Framework7({
id: ‘plus’,
root: ‘#app’,
theme: ‘ios’,
view: {
pushState: true,
},

routes: routes
});

2

Did you ever solve this? I’m having the same problem, followed all documents, esp. the router and tabs docs, the blog entry on “mastering fw7 v2 router” and the tabs template, which doesn’t seem to be routable either.
I need to be able to display a specific view and subview programatically.

If I set it up like your example, it’ll work from within the app (e.g. tapping on the tabs works perfectly), but as soon as I enable pushState, no tab view will load. But other pages and routes work quite fine.

3

Views (in tabbed app) as toutable tabs are not supported, routable tabs can be only within page

4

Hi, thanks a lot for the reply!
So, what’s the recommended way to have push-state enabled and use tabs and have routes, so that I can navigate programmatically to a specific page?
I can’t seem to figure it out…

5

Views as routable Tabs are not supported. If you need it, you need custom implementation of this where you can manually replace browser state when tab becomes visible. And parse state manually as well to show tab depending on URL.

1 Like