title: Polymer 1.0 - routing
body: <p>I'm new to Polymer. I start writing a simple webapp in which
  1. User first land in a login page
  2. If user passes login, then direct user to content page</p>
  
  <p>I write an element "login"</p>
  
  <pre><code>&lt;dom-module id="login"&gt;
    &lt;template&gt;
      &lt;!-- local DOM for your element --&gt;
      &lt;p&gt;Username&lt;/p&gt;
      &lt;input class="paper-font-body2" value="{{email::change}}" type="email"&gt;
      &lt;br/&gt;
      &lt;p&gt;Password&lt;/p&gt;
      &lt;input class="paper-font-body2" value="{{password::change}}" type="password"&gt;
      &lt;p&gt;{{errorMessage}}&lt;/p&gt;
  
      &lt;iron-ajax
        id="ajax"
        url=""
        method="POST"
        on-response="signInResponse"
        debounce-duration="300"&gt;
      &lt;/iron-ajax&gt;
  
      &lt;button on-click="signIn"&gt;Signin&lt;/button&gt;
    &lt;/template&gt;
  &lt;/dom-module&gt;
  
  &lt;script&gt;
    // element registration
    Polymer({
      is: "login",
  
      // add properties and methods on the element's prototype
      properties: {
        // declare properties for the element's public API
        email: {
          type: String,
          value: "username"
        },
        password: {
          type: String,
          value: "password"
        },
        errorMessage: {
          type: String,
          value: ""
        }
      },
  
      signIn: function() {
        this.$.ajax.url = "http://myserver/login/email";
        this.$.ajax.params = {"email":this.email, "password": this.password};
        this.$.ajax.generateRequest();
      },
  
      signInResponse: function(request) {
        response = request.detail.response;
        console.log(response);
        if (response.code == '0') {
          this.fire("signin-success", response);
        } else {
          this.fire("signin-fail", response);
        }
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>On index.html (main page), I use </p>
  
  <pre><code>&lt;self-login
        sign-in-success="onSignedIn"
        &gt;&lt;/self-login&gt;
  </code></pre>
  
  <p>Question: in the onSignedIn() callback, I would route my page to /content. How can I do?</p>
  
  <p>EDIT 1: As @zacharytamas suggest, I try to use app-router as following</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"&gt;
    &lt;title&gt;app-router&lt;/title&gt;
    &lt;script src="../bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="styles/main.css" shim-shadowdom&gt;
    &lt;link rel="import" href="../bower_components/app-router/app-router.html"&gt;
  &lt;/head&gt;
  &lt;body unresolved&gt;
  &lt;app-router&gt;
    &lt;app-route path="/" import="/elements/home-page.html"&gt;&lt;/app-route&gt;
    &lt;app-route path="/test" import="/elements/home-page.html"&gt;&lt;/app-route&gt;
    &lt;app-route path="*" import="/elements/not-found-page.html"&gt;&lt;/app-route&gt;
  &lt;/app-router&gt;
  
  &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>home-page.html</p>
  
  <pre><code>&lt;dom-module  id="home-page" noscript&gt;
    &lt;template&gt;
      &lt;h2&gt;Hello&lt;/h2&gt;
    &lt;/template&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>It shows a blank page when I browse to both <a href="http://localhost:3000/">http://localhost:3000/</a> and <a href="http://localhost:3000/test">http://localhost:3000/test</a> on Chrome. Any idea?</p>