diff --git a/ignite-router.js b/ignite-router.js index 5f262da..998e3fa 100644 --- a/ignite-router.js +++ b/ignite-router.js @@ -15,7 +15,7 @@ class RouterLink extends IgniteElement { get properties() { return { active: false, - route: null + routes: [] }; } @@ -44,7 +44,11 @@ class RouterLink extends IgniteElement { } update() { - var routeMatches = RouteMatcher.matches(this.route); + var routeMatches = true; + + for (var i = 0; i < this.routes.length && routeMatches; i++) { + routeMatches = RouteMatcher.matches(this.routes[i]); + } if (routeMatches && !this.active) { this.active = true; @@ -79,7 +83,7 @@ class RouterView extends IgniteElement { get properties() { return { show: false, - route: null + routes: [] }; } @@ -94,7 +98,11 @@ class RouterView extends IgniteElement { } update() { - var routeMatches = RouteMatcher.matches(this.route); + var routeMatches = true; + + for (var i = 0; i < this.routes.length && routeMatches; i++) { + routeMatches = RouteMatcher.matches(this.routes[i]); + } if (routeMatches && !this.show) { this.show = true; @@ -196,18 +204,26 @@ class RouteMatcher { window.RouteMatcher = RouteMatcher; class RouterLinkTemplate extends IgniteTemplate { - constructor(route, ...elements) { + constructor(routes, ...elements) { super("router-link", elements); - this.property("route", route); + if (!Array.isArray(routes)) { + routes = [routes]; + } + + this.property("routes", routes); } } class RouterViewTemplate extends IgniteTemplate { - constructor(route, ...elements) { + constructor(routes, ...elements) { super("router-view", elements); - this.property("route", route); + if (!Array.isArray(routes)) { + routes = [routes]; + } + + this.property("routes", routes); } }