Fixed a few bugs, added better documentation.

ignite-router.js

@@ -15,7 +15,8 @@ class RouterLink extends IgniteElement {
     get properties() {
         return {
             active: false,
-            routes: []
+            routes: [],
+            target: null
         };
     }
 
@@ -46,6 +47,10 @@ class RouterLink extends IgniteElement {
     update() {
         var routeMatches = true;
 
+        //Check the target first.
+        routeMatches = RouteMatcher.matches(this.target);
+
+        //Check optional routes next.
         for (var i = 0; i < this.routes.length && routeMatches; i++) {
             routeMatches = RouteMatcher.matches(this.routes[i]);
         }
@@ -59,7 +64,7 @@ class RouterLink extends IgniteElement {
 
     onClick(event) {
         event.preventDefault();
-        window.history.pushState(this.route, this.route, this.route);
+        window.history.pushState(this.target, this.target, this.target);
         window.dispatchEvent(new Event("pushstate"));
     }
 
@@ -204,18 +209,34 @@ class RouteMatcher {
 window.RouteMatcher = RouteMatcher;
 
 class RouterLinkTemplate extends IgniteTemplate {
-    constructor(routes, ...elements) {
+    /**
+     * Initializes a new router link template.
+     * @param {String} target The target route when the link is clicked.
+     * @param {String|String[]} routes Optional routes that can be used to control the active state of the link.
+     * @param  {...any} elements Elements to render within the link.
+     */
+    constructor(target, routes, ...elements) {
         super("router-link", elements);
 
+        if (!routes) {
+            routes = [];
+        }
+
         if (!Array.isArray(routes)) {
             routes = [routes];
         }
 
+        this.property("target", target);
         this.property("routes", routes);
     }
 }
 
 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.
+     */
     constructor(routes, ...elements) {
         super("router-view", elements);
 
@@ -232,5 +253,6 @@ customElements.define("router-view", RouterView);
 
 export {
     RouterLinkTemplate as RouterLink,
-    RouterViewTemplate as RouterView
+    RouterViewTemplate as RouterView,
+    RouteMatcher
 }