Vue navigation router with tabs

1

Hey all,

With a standard tab set-up:

  <f7-app :params="f7params">
    <f7-views tabs class="safe-areas">
      <f7-toolbar tabbar labels bottom>
        <f7-link tab-link="#tab1" tab-link-active>
          <span class="tabbar-label">Page 1</span>
        </f7-link>
        <f7-link tab-link="#tab2">
          <span class="tabbar-label">Page 2</span>
        </f7-link>
        <f7-link tab-link="#tab3">
          <span class="tabbar-label">Page 3</span>
        </f7-link>
      </f7-toolbar>

      <f7-view id="tab1" name="page1" main tab tab-active url="/"></f7-view>
      <f7-view id="tab2" name="page2" tab url="/pagetwo/"></f7-view>
      <f7-view id="tab3" name="page3" tab url="/pagethree/"></f7-view>

How can I choose which tab/view I want to load a page over? ie. how can I select the tab to switch to load this in: this.$f7router.navigate('/pagefour/') instead of my current one?

Thanks,
N.

2

Based on view name:

$f7.views.page1.router.navigate('/something/')

will load page to <f7-view name="page1">

1 Like
3

Thanks so much!!!

4

Thanks, again @nolimits4web! Your method works as expected. The page loads into the route. The following issue I’m experiencing, is that the view doesn’t change. If I manually change tabs, the content is there however.

My flow is; from tab2, go two pages deep (the last page has no-toolbar set), then based on a user action route to the specified content on tab 3.

However what happens is that the toolbar appears over the current page and I’m still on tab 2. The content on tab 3 has been updated as expected, I’m just not routed there. Any thoughts?

5

As a work around for anyone interested with similar behaviour, I chained app.tab.show() to it. Not as clean but it works.

6

this is correct solutions,

  1. show required tab
  2. navigate in it
1 Like
7

Accidentally nailed it, then!