polymer app-route, how to route to a new page within same App

Question

I am trying to navigate to a new page(i.e when i click on a button it should open a new page, within the app)

This is first page

<dom-module id="project-view">
<template>
            <app-location route="{{route}}" use-hash-as-path></app-location>
            <app-route 
             route="{{route}}" 
             pattern="/:name" 
             data="{{routeData}}" 
             tail="{{subroute}}">
            </app-route>

         <iron-selector selected="[[routeData.name]]" attr-for-selected="data-page">
           <a class="btn" data-page="Project" href="#/Project">Go to create project</a>
          </iron-selector>

            <iron-pages selected="[[routeData.name]]" attr-for-selected="name">
                <create-project name="Project" route="{{subroute}}"></create-project>
                </iron-pages>
        </main>
    </div>

    <div>

    </div>


</template>
<script>
    Polymer({
        is: 'project-view',
});
</script>
</dom-module>

so now when I click on the button "Go to create project", the create project is opening in the same page, instead of going to a new page. the Url changes to /#/Project but it opens the create-project page just beneath the current page

where create-project is just a simple html form page. I want to open the create project such that only create-project content appears on the page and not the fusion of previous page content with create-project page

Can I navigate to create-project ? Is there anything I am missing, or is it even possible

Answer 1

Polymer's app-route is designed this way, to work with a "single page app" or SPA. You can create a link or button to show a completely separate page if you like, without the hash. /my-separate-page. But you'll lose everything from memory in your original Polymer based app.