Link click attached to view

Lets say I have the following in the index main page:

<div class="view view-init  view-main">
    <div data-name="home" class="page"> 
        <a href="/dashboard/"  data-view=".view-dashboard">dash app</a><br/>
    </div>
 </div>
<div class="view view-dashboard view-init"></div>

No once the user clicks on dashboard link i want the content to open up IN dashboard view not in the main view.

This is my app.js

var dashboardView   = app.views.create('.view-dashboard', {
  url: '/dashboard/'
})

this is my route file

{
path : ‘/dashboard/’,
componentUrl: ‘./dashboard.html’,
name : ‘dashboard’,
},

Can someone please help me out ?

Thanks

An update, it actually works and loads the content in the DOM but the view-main is hiding it ? do i have to maually hide the main view?

This actually works for anyone that stuck like me:

   {
        path        : '/dashboard/',
        componentUrl: './dashboard.html',
        name        : 'dashboard',
        on: {
            pageInit: function (event, page) {
              console.log(event, page);
              $$('.view-main').hide();
          }
        }
    },

I am sure theres an elegant way to do this but until then i’ll use this!

Why you need to hide main view?
Just curious.