You can't view the URL changes because you are viewing this page in a frame.
You want to see that URL, that's what routing is all about
Fix it by opening this demo in a new window.
excess-routeexcess-route element is used to define your routes.
<excess-route route="/book" active="{{isActive}}"></excess-route>
You can think of excess-route as a regular expression that matches against window.location.
If match is successful, route activates and reflects match variables into its attributes.
<excess-route route="/book" active="{{isActive}}"></excess-route>
// this route matches http://example.com/book, and nothing else
<excess-route route="/:media" media="{{myMedia}}"></excess-route> // http://example.com/book, http://example.com/movie match // http://example.com/movie/Groundhog does not match
<excess-route route="/:media/:title" media="{{myMedia}}" title="{{myTitle}}"></excess-route> // http://example.com/movie/Groundhog matches // http://example.com/book, http://example.com/movie do not match because they have no title
you can use the full power of pathToRegex expressions to define your routes
<excess-route route="/:media/:title?" media="{{myMedia}}" title="{{myTitle}}"></excess-route> // http://example.com/book, http://example.com/movie, http://example.com/movie/Groundhog all match // this is because title is now optional with ? flag
<excess-route route="/:media/(.*)?" media="{{myMedia}}" ></excess-route> // http://example.com/book, http://example.com/movie, http://example.com/movie/Groundhog all match // title is not reflected into attributes
<excess-route route="/(.*)?" redirect-to="/start" activation-modifiers="x" ></excess-route> // http://example.com/book, http://example.com/movie, http://example.com/movie/Groundhog all match // they will be redirected to /start // activation-modifiers are used to prevent recursion
#1 <excess-route route="/:topmenu/(.*)?" topmenu="{{myTopMenu}}"></excess-route>
#2 <excess-route route="/movie" active="{{movieActive}}"></excess-route>
#3 <excess-route route="/movie/:movieTitle" movie-title="{{myMovieTitle}}></excess-route>
#4 <excess-route route="/(.*)?" redirect-to="/movie" activation-modifiers="x"></excess-route>
// http://example.com/ will only match #4, and get redirected to http://example.com/movie
// http://example.com/movie will match #1 and #2
// http://example.com/book will match #1
// http://example.com/movie/Groundhog with match #1 and #3
<excess-route route="/:topmenu/(.*)?" topmenu="{{myTopMenu}}"></excess-route> <iron-page selected="{{myTopMenu}}">....</iron-page> <iron-selectable selected="{{myTopMenu}} attr-for-selected="name"> <div name="movie">movies</div> <div name="book">book</div> </iron-selectable> // http://example.com/movie will match // iron-page will display page 'movie' // iron-selectable will select 'movie' // clicking on book div will set myTopMenu to 'book' // changing value of myTopMenu cause route to navigate to http://example.com/book
With these capabilities, you should be able to solve basic routing problems.
For advanced problems that can't be solved with provided elements, use the Excess.RouteManager JavaScript API directly
Polymer Starter Kit has the following pages:
This translates into these routes:
// mainmenu switches between main pages: home|users|contact
// .* at the end allows it to match /users/username
<excess-rote route="/:mainmenu/(.*)?" mainmenu="{{main}}"></excess-route>
// users/username matches when particular user is requested
<excess-route route="/users/:username" username="{{user}}"></excess-route>
// wildcard redirects to our demo route, if no other route matches
<excess-route route="/(.*)" redirect-to="/home" activation-modifiers="x"></excess-route>
Combine these routes with the existing UI, conditional templates, and you've got a router app.
Source:
Live
That should be enough to get you started. If you just can't get enough of this, here are a few more things:
excess-router-config element configures global router settings.
This menu lets you demo and switch between different path styles
How do you transition between routes
Excess.RouteManager.transitionTo(), replaceWith()The Polymer elements are built on top of a javascript library, Excess.RouteManager. Library provides functionality similar to page.js
Read the element docs to learn more about configuration options, transition's lifecycle, and other advanced topics.
lazy-pages are a replacement for iron-page and neon-animated-page. They have routing-friendly extensions: lazy loading, lazy imports, and value correction to guard against bad routes.