How to route to a toolbar tab / view

Questions
1

I’m trying to switch to a toolbar tab after the login authentication is done after loading my app. I’ve been trying to call:

app.toolbar.show(“view-stories”);

My initial layout had the tabs defined inside the toolbar. Looking at the documentation for routes it shows the tabbar defined separately from the tabs that are set to be routable. Below is my attempt to follow that documentation. I still cannot get the toolbar tab / view to switch after the login is completed.

The other effect is the toolbar is at the top of all views rather than at the bottom of the screen.

Any ideas?

  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar tabbar tabbar-labels toolbar-bottom">
    <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</i>
        <i class="icon material-icons md-only">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#view-stories" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">list_bullet</i>
        <i class="icon f7-icons ios-only icon-ios-fill">list_bullet</i>
        <i class="icon material-icons md-only">list</i>
        <span class="tabbar-label">Stories</span>
      </a>
      <a href="#view-capture" class="tab-link">
        <i class="icon f7-icons ios-only">plus_add</i>
        <i class="icon f7-icons ios-only icon-ios-fill">plus_add_fill</i>
        <i class="icon material-icons md-only">add_to_photos</i>
        <span class="tabbar-label">Capture</span>
      </a>
      <a href="#view-profile" class="tab-link">
        <i class="icon f7-icons ios-only">person</i>
        <i class="icon f7-icons ios-only icon-ios-fill">person_fill</i>
        <i class="icon material-icons md-only">person</i>
        <span class="tabbar-label">Profile</span>
      </a>
    </div>
  </div>

<!-- Views/Tabs container -->
<div class="views tabs tabs-routable">      
  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-home" class="view view-main view-init tab tab-active safe-areas">
    <!-- Page, data-name contains page name which can be used in page callbacks -->
    <div class="page" data-name="home">
    </div>
  </div>
  
  <div id="view-stories" class="view tab safe-areas">
  </div>
  <div id="view-capture" class="view tab safe-areas">
  </div>
  <div id="view-profile" class="view tab safe-areas">
  </div>
      
</div>
2

In this latest version I have the toolbar on the bottom and dont have a home view. The default view is /sessions/. What I cannot get to work is triggering a refresh of the /sessions/ page after login authentication is complete.

Here is the index page section for the toolbar and views:

<div class="views tabs">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#view-stories" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">list_bullet</i>
        <i class="icon f7-icons ios-only icon-ios-fill">list_bullet</i>
        <i class="icon material-icons md-only">list</i>
        <span class="tabbar-label">Stories</span>
      </a>
      <a href="#view-capture" class="tab-link">
        <i class="icon f7-icons ios-only">plus_add</i>
        <i class="icon f7-icons ios-only icon-ios-fill">plus_add_fill</i>
        <i class="icon material-icons md-only">add_to_photos</i>
        <span class="tabbar-label">Capture</span>
      </a>
      <a href="#view-profile" class="tab-link">
        <i class="icon f7-icons ios-only">person</i>
        <i class="icon f7-icons ios-only icon-ios-fill">person_fill</i>
        <i class="icon material-icons md-only">person</i>
        <span class="tabbar-label">Profile</span>
      </a>
    </div>
  </div>
  
  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-home" class="view view-main view-init tab safe-areas">
  </div>
  
  <div id="view-stories" class="view tab  tab-active safe-areas">
  </div>
  <div id="view-capture" class="view tab safe-areas">
  </div>
  <div id="view-profile" class="view tab safe-areas">
  </div>
      
</div>

I create the views like so:

var homeView = app.views.create('#view-home', {
  url: '/'
});
var storiesView = app.views.create('#view-stories', {
  url: '/stories/', name: 'stories'
});
var captureView = app.views.create('#view-capture', {
  url: '/capture/'
});

After Google authentication is completed I have tried to call:

app.views.stories.router.refreshPage();

3

This second version works once I fixed stories.html so that the mounted event was above the method: call. Now I have Stories as my main landing page, navigation is correct and stories updates after login is completed. Phew!