How to route to other page when using main app component


I using main app component, the in this component we have two view tabs. in the first view we have the list component ,when click on the list item, we need to route to detail page. but I do not want to show the tab bar in the detail page. how to implement it ?

Try to add no-toolbar class to detailed page and it should hide tabbar on page open


more #f7 videos

I add no-toolbar to the page ,but when navigate, the toolbar hidden, but the view does not navigate to detail page.

this is our main.html which is main app component.

<div class="views tabs">
            <div class="toolbar tabbar toolbar-bottom tabbar-labels toolbar-hidden">

<div id="view-home" class="view view-main view-init>
  <div id="view-settings" class="view tab tab-active">
  <div class="list ">

this is the detail page

<div class="page no-toolbar">

and we have the routes

var routes = [


    name: 'detail',

    path: '/detail/',

    url: './pages/detail.html',



in the setting view, we have a list control and click the list item I need to navigate to detail page.

but the navigation seems not work

More over , if I press F5 to refresh the page, then the navigation done. So what’s the issue

Where in code examples you posted something related to the “navigating to details” ? I see only routes and views

the list code

<div class="list ">
        <a href="/detail/" class="item-link item-content">
                                      <div class="item-inner">
                                        <div class="item-title">item</div>

also some strange things is in main app component, if I use view tabs. the second view page has no page-current attribute when I switch to the second tab. so that If you navigate to detail from second view, the detail page will be hooked to the first view.