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.