Struggling with the v2 Router

Questions
1

In my old v1 App I had an HTML struggle similar to the following:

<div class="views tabs">
    <div class="view view-main">
         <div class="pages navbar-through">
            <div data-page="main" class="page navbar-fixed toolbar-fixed">
                <div class="navbar">
                       ...
                </div>
                <div class="page-content">
                       ...
                </div>
            </div>
            <div data-page="main-detail" class="page cached navbar-fixed toolbar-fixed">
               <div class="navbar">
                       ...
                </div>
                <div class="page-content">
                       ...
                </div>
            </div>
            ....
    </div>
    <div class="toolbar tabbar tabbar-labels">
        <div class="toolbar-inner">
            <a href="javascript:switchTab('main');" id="mainTabLink" class="link no-animation active">
                ....
            </a>
            ....
        </div>
    </div>
</div>

And in my App logic I’d have a switchTab() script that would basically (amongst other things) mainView.router.load({pageName: tab,animatePages: false});. I’d also have a function attached to the elements on the page to dynamically grab content via AJAX and then slide in the main-detail page with mainView.router.load({pageName: ‘main-detail’});

The problem seems to be that v2 page handling is fundamentally different and I can’t quite get my head around it.

What I’ve done with v2 so far is this:

<div class="views tabs">
    <div class="toolbar tabbar-labels">
        ....
    </div>
    <div id="main-tab" class="view tab tab-active view-main view-init"  data-name="main-tab" data-url="/">
        <div class="page" >
            <div class="navbar">
                ....
            </div>
            <div class="page-content ptr-content hide-bars-on-scroll " data-ptr-distance="55">
                ....
            </div>
        </div>
    </div>
    <div class="view">
        <div class="page" data-name="main-detail" data-url="/main-detail/">
            <div class="navbar">
                ....
            </div>
            <div class="page-content">
                ....
            </div>
        </div>
    </div>
</div>

This time I’m using the build in tabs to switch between the tab pages (which works), but then when I try mainView.router.navigate(’/main-detail/’); or mainView.router.navigate(‘boozr-detail’); nothing happens. Clearly I’m getting the layout confused here.

in my routes initialisation I have:

routes: [
    {
        path: '/',
        pageName: 'main-tab',
    },
    {
        path: '/main-detail/',
        pageName: 'main-detail',
    },
],

Also - another query - I tried moving the navbar to a direct child of the views class, but it doesn’t show up, even with iosDynamicNavbar: false