More f7 vue routing/tabs Confusion

1

How do I make tabs that actually show content that I select with one of it’s tabs??
I have tried every combination, read every example, and have gotten nowhere with this.
None of the following will work as a routable tab:

Toolbar.vue:

    <f7-toolbar tabbar>
      <f7-link tab-link="#tab1" icon="icon-1" href="/tab1" text="tab1" />
      <f7-link tab-link="#tab2" icon="icon-2" href="/tab2/" text="tab2" />
      <f7-link tab-link="#tab3" icon="icon-3" href="/tab3/" text="tab3" />
 
    </f7-toolbar>

    <div class="tabs tabs-routable">
      <div class="tab page-content" id="tab1"></div>
      <div class="tab page-content" id="tab2"></div>
      <div class="tab page-content" id="tab3"></div>
    </div>

    <!-- Tabs >
    <f7-page-content tab id="tab1" tab-active>Tab 1 Content ...</f7-page-content>
    <f7-page-content tab id="tab2">Tab 2 Content ...</f7-page-content>
    <f7-page-content tab id="tab3">Tab 3 Content ...</f7-page-content>

    <!--f7-tabs routable>
      <f7-tab tab id="tab1" url="/tab1" tab-active />
      <f7-tab tab id="tab2" url="/tab2/" />
      <f7-tab tab id="tab3" url="/tab3/" />

    </f7-tabs-->

    <!-- Tabs>
    <f7-views tabs id="tabs">
      <f7-view tab id="tab1" url="/tab1/" main tab-active />
      <f7-view tab id="tab2" url="/tab2/" />
      <f7-view tab id="tab3" url="/tab3/" />
    </f7-views -->

My router:

  { component: home, id: 'home', path: '/home/',
    tabs: [
      { meta: { name: "tab1" }, tabId: 'tab1', component: all, path: '/tab1' }, 
      { meta: { name: "tab2" }, tabId: 'tab2', component: online, path: '/tab2/' }, 
      { meta: { name: "tab3" }, tabId: 'tab3', component: pending, path: '/tab3/' },
      { meta: {}, tabId: '404', component: error, path: '(.*)'  }
    ],
 },

App.vue:

  <div id="app">

    <!-- Statusbar -->
    <f7-statusbar />

    <!-- From component above -->
    <tool-bar />

    <!-- Left Panel -->
    <f7-panel left cover theme-dark>
      <f7-view url="/panel-left/" />
    </f7-panel>

    <!-- Right Panel -->
    <f7-panel right cover theme-dark>
      <f7-view url="/panel-right/" />
    </f7-panel>

    <!-- Main View -->
    <f7-view id="main-view" url="/home/" main navbar-through :dynamic-navbar="true" />
2
  • you don’t have route-tab-id prop on f7-link
  • tab-link prop must be a boolean
  • your tabs’ routes are wrong http://framework7.io/docs/routes.html#routable-tabs, you need to specify id prop on each tab route, not a tabId !
  • routable tabs must be under View component because View is a router!
1 Like
3

F7-Vue Kitchen Sink is a great place to check something working https://github.com/framework7io/framework7-vue/blob/master/kitchen-sink/src/pages/tabs-routable.vue

1 Like
4

Thank you for your reply!
I was following this example under the “Tab Link” section where it says:

<f7-tabs>
  <f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
  <f7-tab id="tab-1">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link="#tab-1" tab-link-active>Show Tab 1</f7-link>
<f7-link tab-link="#tab-2">Show Tab 2</f7-link>

<!-- Renders to: -->

<!-- Tabs -->
<div class="tabs">
  <div class="tab tab-active" id="tab-1">Tab 1</div>
  <div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" data-tab="#tab-1" class="tab-link tab-link-active">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>
5

And right below there is a correct routable tabs example:

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-2"></f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>

<!-- Renders to: -->

<!-- Tabs -->
<div class="tabs">
  <div class="tab" id="tab-1"></div>
  <div class="tab" id="tab-2"></div>
</div>
<!-- Switch Between Tabs -->
<a href="/tabs/" class="tab-link" data-route-tab-id="tab-1">Show Tab 1</a>
<a href="/tabs/tab-2/" class="tab-link" data-route-tab-id="tab-2">Show Tab 2</a>
2 Likes
6

I used the kitchen sink example, and now I get this error. I don’t have these kinds of routing problems with other ui-libraries.

TypeError: Cannot read property '__vue__' of undefined
    at Router$1.tabComponentLoader (framework7-vue.esm.bundle.js?8e71:152)
    at loadTab (framework7.esm.bundle.js?c501:3560)
    at eval (framework7.esm.bundle.js?c501:3568)
    at Array.forEach (<anonymous>)
    at Router$1.tabLoad (framework7.esm.bundle.js?c501:3568)
    at Router$1.forward (framework7.esm.bundle.js?c501:3146)
    at resolve (framework7.esm.bundle.js?c501:3293)
    at VueComponent.eval (framework7-vue.esm.bundle.js?8e71:121)
    at Array.eval (vue.esm.js?efeb:1813)
    at flushCallbacks (vue.esm.js?efeb:1734)

App.vue:
<f7-view id="main-view" url="/home/" main navbar-through :dynamic-navbar="true" />

Routes:
export default [
  { component: home, id: 'home', path: '/home/',
    tabs: [
      { meta: { name: "tab1" }, id: 'tab1', component: tab1, path: '/' },
      { meta: { name: "tab2" }, id: 'tab2', component: tab2, path: '/tab2/' }, 
      { meta: { name: "tab3" }, id: 'tab3', component: tab3, path: '/tab3/'},
    ],
 },

Home.vue:
    <!-- Switch Between Tabs -->
    <f7-link tab-link route-tab-id="tab-1" href="./" text="tab1" />
    <f7-link tab-link route-tab-id="tab-2" href="tab2/" text="tab2" />
    <f7-link tab-link route-tab-id="tab-3" href="tab3/" text="tab3" />

    <!-- Tabs -->
    <f7-tabs>
      <f7-tab id="tab-1" />
      <f7-tab id="tab-2" />
      <f7-tab id="tab-3" />
    </f7-tabs>
7

Any reason why your home.vue doesn’t have f7-page? Page component must return pages (f7-page)

8

Thank you for your reply. Here is the rest of the template for Home.vue:
This example demonstrates the three things that I don’t understand about framework7:

  • The routes are not found, yet they are exactly as in the kitchen-sink example.
  • The url does not even change??
  • The “not found” page is not underneath the tab bar.
  • The back button on the “404” page does not go back(probably related to the 2nd point).
<f7-page tabs tabbar-fixed :page-content="false">

    <f7-navbar sliding><!-- sliding v-if="$theme.ios"-->

      <f7-nav-left>

        <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left" />

      </f7-nav-left>

      <f7-nav-title>My App</f7-nav-title>

      <f7-nav-right>

        <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right" />

      </f7-nav-right>

    </f7-navbar>

    <!-- From "Kitchen Sink" example -->
    <f7-toolbar tabbar>
        <f7-link tab-link route-tab-id="tab-1" href="./" text="tab1" />
        <f7-link tab-link route-tab-id="tab-2" href="tab1/" text="tab2" />
        <f7-link tab-link route-tab-id="tab-3" href="tab2/" text="tab3" />
    </f7-toolbar>

    <!-- Tabs -->
    <f7-tabs>
      <f7-tab id="tab-1" />
      <f7-tab id="tab-2" />
      <f7-tab id="tab-3" />
    </f7-tabs>

  </f7-page>
9

Working example https://jsfiddle.net/2f87p02q/

Don’t use self-closing tags on Vue components!!!

3 Likes