0

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

prakhar nigam
  • 19
  • 5
  • if you like to handle it with iron-pages., you can follow this link https://stackoverflow.com/questions/55321027/how-to-implement-routing-in-polymer-3-using-app-route/55321028#55321028 – shabarinath Mar 30 '19 at 11:33

1 Answers1

0

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.

gstroup
  • 1,064
  • 8
  • 16
  • thanks for the reply @gstroup , but I somehow figured of doing that using px-view (and not using iron-pages) as I am statically loading the page by setting the "route.path" property and setting the page using window.location to my page href path. – prakhar nigam Oct 06 '17 at 06:15