Tabbar/ Toolbar Routes and Redirect

Hi @nolimits4web,

I have written below code to add tabbar/toolbar to access through out the application for which i have defined the routes into tabs array of index route as below but it seems it is not functioning.

When i click on any tab it does not respond, one more thing which I am trying to achieve that these tabs and routes should be working from any page of the application that’s why I have added them just after the view.

Can you suggest me what am I doing wrong here or what have I missed as per route documentations?

Page Routes:

var routes = [
  // Index page
  {
    path: "/",
    url: "./index.html",
    name: "home",
    tabs: [
      {
        path: "/",
        id: "home-tab",
        url: "./index.html"
      },
      {
        path: "/profile/",
        id: "profile-tab",
        url: "./pages/profile.html",
        name: "profile"
      },
      {
        path: "/feedback/",
        id: "feedback-tab",
        url: "./pages/feedback.html",
        name: "feedback"
      },
      {
        path: "/cart/",
        id: "cart-tab",
        url: "./pages/cart.html",
        name: "cart"
      }
    ]
  },
  // About page
  {
    path: "/about/",
    url: "./pages/about.html",
    name: "about"
  }
];

Index Page HTML:

<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/" >
<!-- page bottom tabbar -->
    <div class="toolbar tabbar tabbar-labels toolbar-bottom bg-color-themeOrange primary-tabbar-bottom" >
    <div class="toolbar-inner">
        <a href="./" data-route-tab-id="home-tab" class="tab-link text-color-white" >
        <i class="icon f7-icons">house_fill</i>
        <span class="tabbar-label">Home</span>
        </a>
        <a href="/profile/" data-route-tab-id="profile-tab" class="tab-link text-color-white" >
        <i class="icon f7-icons">person_fill</i>
        <span class="tabbar-label">Profile</span>
        </a>
        <a href="/feedback/" data-route-tab-id="feedback-tab" class="tab-link text-color-white" >
        <i class="icon f7-icons">envelope_fill</i>
        <span class="tabbar-label">Feedback</span>
        </a>
        <a href="/cart/" data-route-tab-id="cart-tab" class="tab-link text-color-white" >
        <i class="icon f7-icons">cart_fill<span class="badge color-red">5</span></i>
        <span class="tabbar-label">Cart</span>
        </a>
    </div>
    </div>
</div>

Please help me I am stuck in a project at this place.

Views can’t be used as routable tabs https://framework7.io/docs/tabs.html#routable-tabs

Note that Views can not be used as Routable Tabs. Routable Tabs can be used only inside of View/Router!