Routing


The router is used to connect the component to a specific path and also to switch pages according to the path set in the URL.Polymer has some tools that help to build single page applications - app-location and app-root.

app-location:-The app-location maintains synchronization between the location bar and the state of the app. App-location is used to capture the location and send it to the app-route.
app-route:-App-route gets the URL from the app-location, then capture the path from it.

\\Syntax of app-location
< app-location route="{{route}}" >
----------------------------------------------------------------
\\Syntax of app-route
< app-route  route="{{route}}"    \\route contain URL send by app-location
pattern="/:view"               \\Compare URL with this pattern
data="{{routeData}}"            \\Object in which the received path data is stored
tail="{{subroute}}">\\Object with path data passed to the next object

< iron-page> is an element that is used to switch between pages by taking attributes and compare them with names.

\\iron-pages selects the view based on the active route
< iron-pages selected="[[routeData.view]]" attr-for-selected="name">
< my-profile-view name="profile" route="{{subroute}}">
< my-message-list-view name="messages" route="{{subroute}}">
< my-detail-view name="detail" route="{{subroute}}">
< /iron-pages>

Route objects

Route object contain two properties:-
1. prefix:- The path matched by the previous < app-route> element.
2. path:- The path this route object is matching against.

* if the current URL is /users/lfc/messages and the top-level < app-route> has the pattern `/users/:user':*
\\Syntax for prefix
{
prefix: '',
path: '/users/lfc/messages'
}
-----------------------------
-----------------------------
\\Syntax for tail
{
prefix: '/users/lfc',
path: '/messages'
}

There are two ways to change the current URL when you are using < app-route>:-
1. Link:- When you click on a link, < app-location> intercepts the navigation event and updates its route property.
2. Updating the route:- We can use two-way data binding or this.set to update the route.
this.set('route.path', '/search/');





Visit :


Discussion



* You must be logged in to add comment.