Views As Tabs and pushstate

Questions
1

Hi i’m trying to use pushstate in my main view but my app use Views as tabs structure

When I remove the “toolbar” structure, pushstate works, but not without

What’s wrong ?

My code in index.html :

<!-- Views/Tabs container -->
    <div class="views tabs safe-areas">
      <!-- Tabbar for switching views-tabs -->
      <div class="toolbar tabbar-labels toolbar-bottom no-shadow">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">home</i>
            <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            <i class="icon material-icons md-only">home</i>
            <span class="tabbar-label" style="display: none;">Accueil</span>
          </a>
          <a href="#view-explore" class="tab-link">
            <i class="icon f7-icons ios-only">compass</i>
            <i class="icon f7-icons ios-only icon-ios-fill">compass_fill</i>
            <i class="icon material-icons md-only">explore</i>
            <span class="tabbar-label" style="display: none;">Explorer</span>
          </a>

          <a href="#view-favorites" class="tab-link">
            <i class="icon f7-icons ios-only">heart</i>
            <i class="icon f7-icons ios-only icon-ios-fill">heart_fill</i>
            <i class="icon material-icons md-only">favorite</i>
            <span class="tabbar-label" style="display: none;">Favoris</span>
          </a>
          <a href="#view-settings" class="tab-link">
            <i class="icon f7-icons ios-only">filter</i>
            <i class="icon f7-icons ios-only icon-ios-fill">filter</i>
            <i class="icon material-icons md-only">tune</i>
            <span class="tabbar-label" style="display: none;">Profil</span>
          </a>
        </div>
      </div>

      <!-- TABS VIEW -->
      <div id="view-home" class="view view-main tab tab-active"></div>
      <div id="view-explore" class="view tab"></div>
      <div id="view-addevent" class="view tab"></div>
      <div id="view-favorites" class="view tab"></div>
      <div id="view-settings" class="view tab"></div>

    </div>

And in app.js :

var homeView = app.views.create('#view-home', {
  name: 'home',
  url: '/',
  pushState: true,
});
var exploreView = app.views.create('#view-explore', {
  name: 'explore',
  url: '/explore/',
});
var addeventView = app.views.create('#view-addevent', {
  url: '/addevent/',
});
var favoritesView = app.views.create('#view-favorites', {
  url: '/favorites/',
});
var settingsView = app.views.create('#view-settings', {
  url: '/settings/'
});
2

What behavior is expected?

3

By enabling pushstate I except hash url to work

When navigate on my tabs I should be able to use my back button To go to previous page/view

4

Push state works only for main view

5

What does it means ? I use pushstate only on home who is the main view

Do you want to say that I should’nt use tabs with views ?

6

Well, I tried to put toolbar on my 4 page to simulate the transition to avoir the problem

The only issue, is that I used to use router.refreshPage(); to reload data

Here, the view doesn’t work… How to refresh my page data ?

7

Nobody can help me please ?