Route parameters are useful when the same Web Component should be
rendered for a number of paths, where a part of the path is static, and
another part contains a parameter value. E.g. for both /user/1
and /user/42 paths it's the same Web Component that
renders the content, the /user/ part is static, and 1
and 42 are the parameter values.
Route parameters are defined using an express.js-like syntax. The implementation is based on the path-to-regexp library that is commonly used in modern front-end libraries and frameworks. All features are supported:
/profile/:user/:size/:color?/kb/:path*/kb/:path+/image-:size(\d+)px/(user[s]?)/:id
Route parameters are bound to the location.params property of
the route Web Component
(location
is set on the route components by Vaadin Router).
location.params.id or location.params['id']location.params[0]The example below shows how to access route parameters in a Polymer 2 based Web Component:
ID: [[location.params.id]]
/project or /projects: [[location.params.0]]
Route matching rules can be ambiguous, so that several routes would match the same path. In that case, the order in which the routes are defined is important. The first route matching the path gets rendered (starting from the top of the list / root of the tree).
The default route matching is exact, i.e. a
'/user' route (if it does not have children) matches only the
'/user' path, but not '/users' nor
'/user/42'. Trailing slashes are not significant in paths,
but are significant in routes, i.e. a '/user' route matches
both '/user' the '/user/', but a
'/user/' route matches only the '/user/' path.
Prefix matching is used for routes with children, or if
the route explicitly indicates that trailing content is expected (e.g.
a '/users/(*.)' route matches any path starting with
'/users/').
Always place more specific routes before less specific:
{path: '/user/new', ...} - matches only
'/user/new'{path: '/user/:user', ...} - matches
'/user/42', but not '/user/42/edit'{path: '/user/(.*)', ...} - matches anything starting
with '/user/'
The route can be configured so that only specific characters are accepted for a parameter value.
Other characters would not meet the check and the route resolution would continue to other routes.
You only can use unnamed parameters in this case, as it can only be achieved using the custom RegExp.
One possible alternative is to use Route Actions
and check the context.params.
The search query string (?example) URL part is considered
separate from the pathname. Hence, it does not participate in matching
the route path, and location.params does not
contain search query string parameters.
Use location.search to access the raw search query string.
For parsing the parameters, use URLSearchParams native API.
Note: The URLSearchParams API is absent in IE 11, make sure
to have the URLSearchParams polyfill.
Likewise with the search query, the hash string (#example)
is separate from the pathname as well. Use location.hash
to access the hash string in the view component.