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.