Polymer 1.0 - routing

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

I write an element "login"

<dom-module id="login">
  <template>
    <!-- local DOM for your element -->
    <p>Username</p>
    <input class="paper-font-body2" value="{{email::change}}" type="email">
    <br/>
    <p>Password</p>
    <input class="paper-font-body2" value="{{password::change}}" type="password">
    <p>{{errorMessage}}</p>

    <iron-ajax
      id="ajax"
      url=""
      method="POST"
      on-response="signInResponse"
      debounce-duration="300">
    </iron-ajax>

    <button on-click="signIn">Signin</button>
  </template>
</dom-module>

<script>
  // 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);
      }
    }
  });
</script>

On index.html (main page), I use

<self-login
      sign-in-success="onSignedIn"
      ></self-login>

Question: in the onSignedIn() callback, I would route my page to /content. How can I do?

EDIT 1: As @zacharytamas suggest, I try to use app-router as following

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>app-router</title>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="stylesheet" href="styles/main.css" shim-shadowdom>
  <link rel="import" href="../bower_components/app-router/app-router.html">
</head>
<body unresolved>
<app-router>
  <app-route path="/" import="/elements/home-page.html"></app-route>
  <app-route path="/test" import="/elements/home-page.html"></app-route>
  <app-route path="*" import="/elements/not-found-page.html"></app-route>
</app-router>

<script src="scripts/app.js"></script>

</body>
</html>

home-page.html

<dom-module  id="home-page" noscript>
  <template>
    <h2>Hello</h2>
  </template>
</dom-module>

It shows a blank page when I browse to both http://localhost:3000/ and http://localhost:3000/test on Chrome. Any idea?

Solution

Polymer does not have routing built into it by default. There are several front-end routing frameworks you can use with Polymer, however.

A very commonly used approach is a custom element called app-router, which lets you define routes declaratively with just HTML alone. I've had some success with it before. Check out the websitefor information on setting it up.

Another HTML-based way of doing it is a custom element made by a member of the Polymer team called more-routing. Google has a video series about Polymer called Polycasts which made a video explaining the more-routing approach. You should check that video out for info about getting started.

Another option is to do it with JavaScript using the page.js framework. This is the method used the Polymer Starter Kit. Here's another Polycast to get you started on that way.

Welcome to the Polymer world!