Navigation in sap.m

Hi experts,

In  my created two views and layouts for them. 

what i need is i want display second view layout in first view

first.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout"

  controllerName="login.first" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page title="Title">

  <content>

     <VerticalLayout id="firstlayout">

         <Button text="Click" press="navigate"></Button>

     </VerticalLayout>

  </content>

  </Page>

</core:View>

first .controller.js

navigate : function(){

this.byId("firstlayout").removeAllContent();

this.byId("firstlayout").addContent(sap.ui.getCore().byId("secondlayout"));

}

second.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout"

  controllerName="login.second" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page title="Title">

  <content>

      <VerticalLayout id="secondlayout">

         <Button text="Second View" ></Button>

     </VerticalLayout>

  </content>

  </Page>

</core:View>