Polymer - App Route

The app-route element utilizes an object, which describes a state about the current route, via the route property. It will determine the state using pattern property and determines some data related to the route, and a tail that contains the rest of the route as shown in the following code.

<app-location route = "{{route}}"></app-location>
   route = "{{route}}"
   pattern = "/:page"
   data = "{{routeData}}"
   tail = "{{subroute}}">

   route = "{{subroute}}"
   pattern = "/:id"
   data = "{{subrouteData}}">

The explanation of the above instances is listed in the following table −

Sr.No. Field & Description


It is an element that provides synchronization between the browser location bar and the state of an app, and produces a route value.



The route.path property is matched by comparing it to the pattern property.



It sets the data property with an object, whose properties correspond to the parameters in pattern property. It is responsive to bi-directional changes to the data objects they produce.



It represents the remaining part of the route state, after the pattern has been applied to a matching route.

Hashes vs Paths

The portion of the URL pathname is used by an app-location route with the help of backend server. The app-location can be configured to use the hash part using the following attribute.

<app-location route = "{{route}}" use-hash-as-path></app-location>
Kickstart Your Career

Get certified by completing the course

Get Started