Routable tabbar doesn't work

towry · April 27, 2020, 12:57am

It automatically active the first tab when user navigate back page.

See the video: https://github.com/towry/n/blob/master/6820184319992429380.MP4

Home.vue:

<f7-page :page-content="false" @page:afterout="onPageOut">
<!-- toolbar must at top of f7-tabs because tabs depend on toolbar less variables -->
<f7-toolbar tabbar bottom labels class="AppToolbar">
  <qx-link
    class="scope-label-link"
    href="/"
    tab-link
    route-tab-id="home"
    :tab-link-active="tabId == 'home'"
  >
    <div class="scope-label-link-abs">
      <icon class="scope-icon" href="icon-clover" />
      <span class="scope-label">{{ $t("home") }}</span>
    </div>
  </qx-link>

  <qx-link class="scope-search-link" href="/search" animate tab-link>
    <icon class="scope-icon" href="icon-sousuo2" />
  </qx-link>

  <qx-link
    tab-link
    class="scope-label-link"
    href="/user"
    route-tab-id="user"
    :tab-link-active="tabId == 'user'"
  >
    <div class="scope-label-link-abs">
      <icon class="scope-icon" href="icon-wode2" />
      <span class="scope-label"> {{ $t("mine") }}</span>
    </div>
  </qx-link>
</f7-toolbar>

<f7-tabs routable animated>
  <f7-tab
    id="home"
    class="page-content"
    tab-active
  ></f7-tab>
  <f7-tab
    id="user"
    class="page-content"
  ></f7-tab>
</f7-tabs>

routes:

export default [

{
path: “/”,
component: Home,
// beforeEnter: [checkWechatId, checkAuth],

tabs: [
  {
    path: "/",
    id: "home",
    name: "home",
    asyncComponent: () =>
      import(
        /* webpackChunkName: "jobs-chunk" */ "@/views/job/ListView.vue"
      )
  },

  {
    path: "/user",
    id: "user",
    name: "mine",
    asyncComponent: () =>
      import(/* webpackChunkName: "mine-chunk" */ "@/views/user/Mine.vue")
  }
]

},

nolimits4web · April 27, 2020, 1:04pm

You should remove this:

it should be handled by router

towry · April 28, 2020, 2:29am

I fixed it by make :ios-swipe-back="false" and :md-swipe-back="false in main view.

towry · April 29, 2020, 10:50am

Reason: The url in main view is “/”, <view main url='/'></view>, but the current url will carry a query called “wechatId”, for example, the location url is “http://xxx.com/?wechatId=123”. So in production, after A page -> B page, the f7-router-view_app-history in localStorage will be ["/", "/a?wechatId=123", "/b?wechatId=123"].

I do not have this issue in local dev, because I do not need the wechatId in local dev, so in dev, after A page -> A page, the f7-router-view_app-history in localStorage will be ["/a?wechatId=123", "/b?wechatId=123"].

To fix it, I change the value of url in main view to “/?wechatId=123”, and I need to remove the f7router-view_app-history in localStorage, the issue is gone.

@nolimits4web