diff --git a/ignite-router.js b/ignite-router.js index 6ad1f4e..9b23f4e 100644 --- a/ignite-router.js +++ b/ignite-router.js @@ -86,7 +86,8 @@ class RouterView extends IgniteElement { get properties() { return { show: false, - routes: [] + routes: [], + strict: false }; } @@ -103,9 +104,16 @@ class RouterView extends IgniteElement { update() { var routeMatches = false; - //Check all of the possible routes until we find a match. - for (var i = 0; i < this.routes.length && !routeMatches; i++) { - routeMatches = RouteMatcher.matches(this.routes[i]); + //Based on whether we are strict matching or not check if we have a match. + if (!this.strict) { + for (var i = 0; i < this.routes.length && !routeMatches; i++) { + routeMatches = RouteMatcher.matches(this.routes[i]); + } + } else { + routeMatches = true; + for (var i = 0; i < this.routes.length && routeMatches; i++) { + routeMatches = RouteMatcher.matches(this.routes[i]); + } } //If we found a match show this router view if it's not already visible, otherwise hide it. @@ -235,16 +243,18 @@ class RouterViewTemplate extends IgniteTemplate { /** * Initializes a new router view. * @param {String|String[]} routes Single or multiple routes to trigger this view to render. - * @param {...any} elements Elements to render within the view. + * @param {any|any[]} elements Elements to render within the view. + * @param {Boolean} strict If true all routes must match before this view becomes visible. */ - constructor(routes, ...elements) { - super("router-view", elements); + constructor(routes, elements, strict = false) { + super("router-view", Array.isArray(elements) ? elements : [elements]); if (!Array.isArray(routes)) { routes = [routes]; } this.property("routes", routes); + this.property("strict", strict); } }