How to link a paper-button to another Polymer page?

Question

I created a Polymer 2.0 app from the starter kit template in order to get to know the framework a little bit. I have a paper-button that should link to another page of the app. However, I still haven't figured out how to do so, since Polymer is loading pages dynamically via JavaScript rather than the browser just calling another one.

I also noticed something else strange: When I click a link in my app-drawer, the page changes automatically and the URL in my browser tab is being updated. However, when I hit refresh with that new URL in my address bar, I get a 404 error since the URL doesn't exist. So is there any way I can resolve this issue and link my button to another page?

This is my button:

<paper-button id="buttonStartQuiz" on-click="startQuiz">
    go! <iron-icon icon="chevron-right"></iron-icon>
</paper-button>

And this is the JavaScript class that corresponds to the layout:

class MyView1 extends Polymer.Element {

    static get is() { return 'my-view1'; }

    /* This method is the listener for the button click */
    startQuiz(e) {
        // Found this on a website, but doesn't work
        this.set('route.path', '/view-question');
    }

}

window.customElements.define(MyView1.is, MyView1);

I don't know if it's any useful, but here are my imports in case you need to know.

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

User 28 User 28 · Accepted Answer · 2018-03-10T03:23:35

The fact is Polymer doesn't do that, some element (app-route which implement with Polymer) do that. The Polymer itself is the library that help you work with custom element easier.

This behavior done by JavaScript and History API. See how to use it on mdn. An application like this, dynamically rewriting the current page rather than loading entire new pages its called a single-page application (SPA).

Basically application like this have only one page (index.html). When you try to load from another path the server will cannot find it.

You can resolve this by config the server to serve every path you used with index.html. For development you can easily use polymer serve command from polymer-cli see here.

To link to another page you can done by many ways:

=> Wrap your element with <a>:

<a href='/another-page'>
  <paper-button>...</paper-button>
</a>

=> Change route variable from app-location: in my-app.html

<app-location route='{{route}}'></app-location>
...
<paper-button on-click='changeRoute'>...</paper-button>

class MyApp extends Polymer.Element {
  ...
  changeRoute () {
    this.set('route.path', '/another-page')
  }
  ...
}

If you want to do this in your file just import and use app-location.

=> Use History API

window.history.pushState({}, null, '/another-page');
// Notify to `app-location`
window.dispatchEvent(new CustomEvent('location-changed'))

How to link a paper-button to another Polymer page?

1 Answers