[SOLVED] (F7 Vue) Routable tab sub-routes?


#1

Background Using f7 (2.2.5) and framework7-vue (2.2.5) with routable tabs based off kitchen sink example:

Question: From a routable tab, is it possible to hit a route and change that routable-tab’s content? (Current behavior is hitting any route as an HREF from inside a routable tab will clear out the full screen, including the tabs along the bottom)

The react docs allude to this behavior (add a “routes” to a routable tab), but doesn’t appear in any of Vue docs: https://framework7.io/react/navigation-router.html

See tab3 “routes”, how would one do this via vue?

It is also possible to have multiple child routes for a tab route :

var routes = [
  {
    path: '/tabs/',
    component: Tabs,
    tabs: [
      {
        path: '/',
        tabId: 'tab1',
        component: Tab1Content
      },
      {
        path: '/tab-2/',
        tabId: 'tab2',
        component: Tab2Content
      },
      {
        path: '/tab-3/',
        tabId: 'tab3',
        routes: [
          {
            path: '/',
            component: Tab3Content
          },
          {
            path: '/tab3-alternate-content/',
            component: Tab3AlternateContent
          }
        ]
      }
    ]                                  
  }];

It doesn’t look like routes is available in f7 source: https://github.com/framework7io/framework7/blob/1a94666d2cccb0f4defd596841607a0233350f1c/src/modules/router/router-class.js


#2

The React docs was for v1. In v2 it was removed because it doesn’t have much sense, in v2 it will be the same as:

tabs: [
  ...
  {
    path: '/tab-3/',
    id: 'tab3',
    component: Tab3Content,
  },
  {
    path: '/tab-3-alternate-content/',
    id: 'tab3',
    component: Tab3AlternateContent,
  },
]

And it should be id instead of tabId


#3

Got it-- just make sure any matching routes have same ID in route.js

Thanks!


This works like a charm:

Routes.js

export default [
{
    path: '/tab-view/',
    component: TabView,
    tabs: [
      {
        path: '/',
        id: 'tab1',
        component: Tab1
      },
      {
        path: '/tab2/',
        id: 'tab2',
        component: Tab2,
      },
      {
        path: '/tab3/',
        id: 'tab3',
        component: Tab3,
      },
      {
        path: '/tab3-subroute1/',
        id: 'tab3',
        component: TabContent1,
      },
      {
        path: '/tab3-subroute1/',
        id: 'tab3',
        component: TabContent2,
      }
}]

From a vue-component (tab3.vue), note no leading slash:

<f7-link href="tab3-subroute1/'>Link to content1 in tab3</f7-link>

<f7-link href="tab3-subroute2/'>Link to content2 in tab3</f7-link>

Or via JS:

this.$f7router.navigate('tab3-subroute1/') 

#4

i have a similar issue. i need to be able to have 3 tabs and from there i have a few subroutes. i could not make it work. the workaround you propose adding an alternate (hidden) tab is no solution since it behaves like a tab (no page animation) is there a way to add sub-routes within a tab?

 {
        path: '/app/',
        component: AppPage,
        tabs: [
            {
                path: '/',
                id:'tab-energy',
                component: EnergyPage,
                routes: [
                    {
                        path: 'energy-consumption/',
                        component: EnergyConsumptionPage
                    }
                ]
            },
            {
                path: 'performance/',
                id:'tab-performance',
                component: PerformancePage
            },
            {
                path: 'cars/',
                id:'tab-cars',
                component: CarPage
            }
        ]
    }

i need to be able to navigate within a tab, so that tabs are visible in the sub-page. furthermore, the page-switch between tab-page and tab-sub-page should be a regular page-switch (with animation) for the sub-pages, but not for the main tabs.