kdu-router 3.1.7 → 3.5.4

package/dist/kdu-router.js

@@ -1,12 +1,12 @@
 /*!
-  * kdu-router v3.1.7
+  * kdu-router v3.5.4
   * (c) 2022 NKDuy
   * @license MIT
   */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.KduRouter = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KduRouter = factory());
 }(this, (function () { 'use strict';
 
   /*  */
@@ -18,23 +18,11 @@
   }
 
   function warn (condition, message) {
-    if ( !condition) {
+    if (!condition) {
       typeof console !== 'undefined' && console.warn(("[kdu-router] " + message));
     }
   }
 
-  function isError (err) {
-    return Object.prototype.toString.call(err).indexOf('Error') > -1
-  }
-
-  function isExtendedError (constructor, err) {
-    return (
-      err instanceof constructor ||
-      // _name is to support IE9 too
-      (err && (err.name === constructor.name || err._name === constructor._name))
-    )
-  }
-
   function extend (a, b) {
     for (var key in b) {
       a[key] = b[key];
@@ -42,158 +30,6 @@
     return a
   }
 
-  var View = {
-    name: 'RouterView',
-    functional: true,
-    props: {
-      name: {
-        type: String,
-        default: 'default'
-      }
-    },
-    render: function render (_, ref) {
-      var props = ref.props;
-      var children = ref.children;
-      var parent = ref.parent;
-      var data = ref.data;
-
-      // used by devtools to display a router-view badge
-      data.routerView = true;
-
-      // directly use parent context's createElement() function
-      // so that components rendered by router-view can resolve named slots
-      var h = parent.$createElement;
-      var name = props.name;
-      var route = parent.$route;
-      var cache = parent._routerViewCache || (parent._routerViewCache = {});
-
-      // determine current view depth, also check to see if the tree
-      // has been toggled inactive but kept-alive.
-      var depth = 0;
-      var inactive = false;
-      while (parent && parent._routerRoot !== parent) {
-        var knodeData = parent.$knode ? parent.$knode.data : {};
-        if (knodeData.routerView) {
-          depth++;
-        }
-        if (knodeData.keepAlive && parent._directInactive && parent._inactive) {
-          inactive = true;
-        }
-        parent = parent.$parent;
-      }
-      data.routerViewDepth = depth;
-
-      // render previous view if the tree is inactive and kept-alive
-      if (inactive) {
-        var cachedData = cache[name];
-        var cachedComponent = cachedData && cachedData.component;
-        if (cachedComponent) {
-          // #2301
-          // pass props
-          if (cachedData.configProps) {
-            fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps);
-          }
-          return h(cachedComponent, data, children)
-        } else {
-          // render previous empty view
-          return h()
-        }
-      }
-
-      var matched = route.matched[depth];
-      var component = matched && matched.components[name];
-
-      // render empty node if no matched route or no config component
-      if (!matched || !component) {
-        cache[name] = null;
-        return h()
-      }
-
-      // cache component
-      cache[name] = { component: component };
-
-      // attach instance registration hook
-      // this will be called in the instance's injected lifecycle hooks
-      data.registerRouteInstance = function (vm, val) {
-        // val could be undefined for unregistration
-        var current = matched.instances[name];
-        if (
-          (val && current !== vm) ||
-          (!val && current === vm)
-        ) {
-          matched.instances[name] = val;
-        }
-      }
-
-      // also register instance in prepatch hook
-      // in case the same component instance is reused across different routes
-      ;(data.hook || (data.hook = {})).prepatch = function (_, knode) {
-        matched.instances[name] = knode.componentInstance;
-      };
-
-      // register instance in init hook
-      // in case kept-alive component be actived when routes changed
-      data.hook.init = function (knode) {
-        if (knode.data.keepAlive &&
-          knode.componentInstance &&
-          knode.componentInstance !== matched.instances[name]
-        ) {
-          matched.instances[name] = knode.componentInstance;
-        }
-      };
-
-      var configProps = matched.props && matched.props[name];
-      // save route and configProps in cachce
-      if (configProps) {
-        extend(cache[name], {
-          route: route,
-          configProps: configProps
-        });
-        fillPropsinData(component, data, route, configProps);
-      }
-
-      return h(component, data, children)
-    }
-  };
-
-  function fillPropsinData (component, data, route, configProps) {
-    // resolve props
-    var propsToPass = data.props = resolveProps(route, configProps);
-    if (propsToPass) {
-      // clone to prevent mutation
-      propsToPass = data.props = extend({}, propsToPass);
-      // pass non-declared props as attrs
-      var attrs = data.attrs = data.attrs || {};
-      for (var key in propsToPass) {
-        if (!component.props || !(key in component.props)) {
-          attrs[key] = propsToPass[key];
-          delete propsToPass[key];
-        }
-      }
-    }
-  }
-
-  function resolveProps (route, config) {
-    switch (typeof config) {
-      case 'undefined':
-        return
-      case 'object':
-        return config
-      case 'function':
-        return config(route)
-      case 'boolean':
-        return config ? route.params : undefined
-      default:
-        {
-          warn(
-            false,
-            "props in \"" + (route.path) + "\" is a " + (typeof config) + ", " +
-            "expecting an object, function or boolean."
-          );
-        }
-    }
-  }
-
   /*  */
 
   var encodeReserveRE = /[!'()*]/g;
@@ -204,10 +40,19 @@
   // - escapes [!'()*]
   // - preserve commas
   var encode = function (str) { return encodeURIComponent(str)
-    .replace(encodeReserveRE, encodeReserveReplacer)
-    .replace(commaRE, ','); };
+      .replace(encodeReserveRE, encodeReserveReplacer)
+      .replace(commaRE, ','); };
 
-  var decode = decodeURIComponent;
+  function decode (str) {
+    try {
+      return decodeURIComponent(str)
+    } catch (err) {
+      {
+        warn(false, ("Error decoding \"" + str + "\". Leaving it intact."));
+      }
+    }
+    return str
+  }
 
   function resolveQuery (
     query,
@@ -221,15 +66,20 @@
     try {
       parsedQuery = parse(query || '');
     } catch (e) {
-       warn(false, e.message);
+      warn(false, e.message);
       parsedQuery = {};
     }
     for (var key in extraQuery) {
-      parsedQuery[key] = extraQuery[key];
+      var value = extraQuery[key];
+      parsedQuery[key] = Array.isArray(value)
+        ? value.map(castQueryParamValue)
+        : castQueryParamValue(value);
     }
     return parsedQuery
   }
 
+  var castQueryParamValue = function (value) { return (value == null || typeof value === 'object' ? value : String(value)); };
+
   function parseQuery (query) {
     var res = {};
 
@@ -242,9 +92,7 @@
     query.split('&').forEach(function (param) {
       var parts = param.replace(/\+/g, ' ').split('=');
       var key = decode(parts.shift());
-      var val = parts.length > 0
-        ? decode(parts.join('='))
-        : null;
+      var val = parts.length > 0 ? decode(parts.join('=')) : null;
 
       if (res[key] === undefined) {
         res[key] = val;
@@ -259,34 +107,39 @@
   }
 
   function stringifyQuery (obj) {
-    var res = obj ? Object.keys(obj).map(function (key) {
-      var val = obj[key];
+    var res = obj
+      ? Object.keys(obj)
+        .map(function (key) {
+          var val = obj[key];
 
-      if (val === undefined) {
-        return ''
-      }
-
-      if (val === null) {
-        return encode(key)
-      }
+          if (val === undefined) {
+            return ''
+          }
 
-      if (Array.isArray(val)) {
-        var result = [];
-        val.forEach(function (val2) {
-          if (val2 === undefined) {
-            return
+          if (val === null) {
+            return encode(key)
           }
-          if (val2 === null) {
-            result.push(encode(key));
-          } else {
-            result.push(encode(key) + '=' + encode(val2));
+
+          if (Array.isArray(val)) {
+            var result = [];
+            val.forEach(function (val2) {
+              if (val2 === undefined) {
+                return
+              }
+              if (val2 === null) {
+                result.push(encode(key));
+              } else {
+                result.push(encode(key) + '=' + encode(val2));
+              }
+            });
+            return result.join('&')
           }
-        });
-        return result.join('&')
-      }
 
-      return encode(key) + '=' + encode(val)
-    }).filter(function (x) { return x.length > 0; }).join('&') : null;
+          return encode(key) + '=' + encode(val)
+        })
+        .filter(function (x) { return x.length > 0; })
+        .join('&')
+      : null;
     return res ? ("?" + res) : ''
   }
 
@@ -363,68 +216,244 @@
     return (path || '/') + stringify(query) + hash
   }
 
-  function isSameRoute (a, b) {
+  function isSameRoute (a, b, onlyPath) {
     if (b === START) {
       return a === b
     } else if (!b) {
       return false
     } else if (a.path && b.path) {
-      return (
-        a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
+      return a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') && (onlyPath ||
         a.hash === b.hash &&
-        isObjectEqual(a.query, b.query)
-      )
+        isObjectEqual(a.query, b.query))
     } else if (a.name && b.name) {
       return (
         a.name === b.name &&
-        a.hash === b.hash &&
+        (onlyPath || (
+          a.hash === b.hash &&
         isObjectEqual(a.query, b.query) &&
-        isObjectEqual(a.params, b.params)
+        isObjectEqual(a.params, b.params))
+        )
       )
     } else {
       return false
     }
   }
 
-  function isObjectEqual (a, b) {
-    if ( a === void 0 ) a = {};
-    if ( b === void 0 ) b = {};
+  function isObjectEqual (a, b) {
+    if ( a === void 0 ) a = {};
+    if ( b === void 0 ) b = {};
+
+    // handle null value #1566
+    if (!a || !b) { return a === b }
+    var aKeys = Object.keys(a).sort();
+    var bKeys = Object.keys(b).sort();
+    if (aKeys.length !== bKeys.length) {
+      return false
+    }
+    return aKeys.every(function (key, i) {
+      var aVal = a[key];
+      var bKey = bKeys[i];
+      if (bKey !== key) { return false }
+      var bVal = b[key];
+      // query values can be null and undefined
+      if (aVal == null || bVal == null) { return aVal === bVal }
+      // check nested equality
+      if (typeof aVal === 'object' && typeof bVal === 'object') {
+        return isObjectEqual(aVal, bVal)
+      }
+      return String(aVal) === String(bVal)
+    })
+  }
+
+  function isIncludedRoute (current, target) {
+    return (
+      current.path.replace(trailingSlashRE, '/').indexOf(
+        target.path.replace(trailingSlashRE, '/')
+      ) === 0 &&
+      (!target.hash || current.hash === target.hash) &&
+      queryIncludes(current.query, target.query)
+    )
+  }
+
+  function queryIncludes (current, target) {
+    for (var key in target) {
+      if (!(key in current)) {
+        return false
+      }
+    }
+    return true
+  }
+
+  function handleRouteEntered (route) {
+    for (var i = 0; i < route.matched.length; i++) {
+      var record = route.matched[i];
+      for (var name in record.instances) {
+        var instance = record.instances[name];
+        var cbs = record.enteredCbs[name];
+        if (!instance || !cbs) { continue }
+        delete record.enteredCbs[name];
+        for (var i$1 = 0; i$1 < cbs.length; i$1++) {
+          if (!instance._isBeingDestroyed) { cbs[i$1](instance); }
+        }
+      }
+    }
+  }
+
+  var View = {
+    name: 'RouterView',
+    functional: true,
+    props: {
+      name: {
+        type: String,
+        default: 'default'
+      }
+    },
+    render: function render (_, ref) {
+      var props = ref.props;
+      var children = ref.children;
+      var parent = ref.parent;
+      var data = ref.data;
+
+      // used by devtools to display a router-view badge
+      data.routerView = true;
+
+      // directly use parent context's createElement() function
+      // so that components rendered by router-view can resolve named slots
+      var h = parent.$createElement;
+      var name = props.name;
+      var route = parent.$route;
+      var cache = parent._routerViewCache || (parent._routerViewCache = {});
+
+      // determine current view depth, also check to see if the tree
+      // has been toggled inactive but kept-alive.
+      var depth = 0;
+      var inactive = false;
+      while (parent && parent._routerRoot !== parent) {
+        var knodeData = parent.$knode ? parent.$knode.data : {};
+        if (knodeData.routerView) {
+          depth++;
+        }
+        if (knodeData.keepAlive && parent._directInactive && parent._inactive) {
+          inactive = true;
+        }
+        parent = parent.$parent;
+      }
+      data.routerViewDepth = depth;
+
+      // render previous view if the tree is inactive and kept-alive
+      if (inactive) {
+        var cachedData = cache[name];
+        var cachedComponent = cachedData && cachedData.component;
+        if (cachedComponent) {
+          // #2301
+          // pass props
+          if (cachedData.configProps) {
+            fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps);
+          }
+          return h(cachedComponent, data, children)
+        } else {
+          // render previous empty view
+          return h()
+        }
+      }
+
+      var matched = route.matched[depth];
+      var component = matched && matched.components[name];
+
+      // render empty node if no matched route or no config component
+      if (!matched || !component) {
+        cache[name] = null;
+        return h()
+      }
+
+      // cache component
+      cache[name] = { component: component };
+
+      // attach instance registration hook
+      // this will be called in the instance's injected lifecycle hooks
+      data.registerRouteInstance = function (vm, val) {
+        // val could be undefined for unregistration
+        var current = matched.instances[name];
+        if (
+          (val && current !== vm) ||
+          (!val && current === vm)
+        ) {
+          matched.instances[name] = val;
+        }
+      }
+
+      // also register instance in prepatch hook
+      // in case the same component instance is reused across different routes
+      ;(data.hook || (data.hook = {})).prepatch = function (_, knode) {
+        matched.instances[name] = knode.componentInstance;
+      };
+
+      // register instance in init hook
+      // in case kept-alive component be actived when routes changed
+      data.hook.init = function (knode) {
+        if (knode.data.keepAlive &&
+          knode.componentInstance &&
+          knode.componentInstance !== matched.instances[name]
+        ) {
+          matched.instances[name] = knode.componentInstance;
+        }
+
+        // if the route transition has already been confirmed then we weren't
+        // able to call the cbs during confirmation as the component was not
+        // registered yet, so we call it here.
+        handleRouteEntered(route);
+      };
 
-    // handle null value #1566
-    if (!a || !b) { return a === b }
-    var aKeys = Object.keys(a);
-    var bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-      return false
-    }
-    return aKeys.every(function (key) {
-      var aVal = a[key];
-      var bVal = b[key];
-      // check nested equality
-      if (typeof aVal === 'object' && typeof bVal === 'object') {
-        return isObjectEqual(aVal, bVal)
+      var configProps = matched.props && matched.props[name];
+      // save route and configProps in cache
+      if (configProps) {
+        extend(cache[name], {
+          route: route,
+          configProps: configProps
+        });
+        fillPropsinData(component, data, route, configProps);
       }
-      return String(aVal) === String(bVal)
-    })
-  }
 
-  function isIncludedRoute (current, target) {
-    return (
-      current.path.replace(trailingSlashRE, '/').indexOf(
-        target.path.replace(trailingSlashRE, '/')
-      ) === 0 &&
-      (!target.hash || current.hash === target.hash) &&
-      queryIncludes(current.query, target.query)
-    )
-  }
+      return h(component, data, children)
+    }
+  };
 
-  function queryIncludes (current, target) {
-    for (var key in target) {
-      if (!(key in current)) {
-        return false
+  function fillPropsinData (component, data, route, configProps) {
+    // resolve props
+    var propsToPass = data.props = resolveProps(route, configProps);
+    if (propsToPass) {
+      // clone to prevent mutation
+      propsToPass = data.props = extend({}, propsToPass);
+      // pass non-declared props as attrs
+      var attrs = data.attrs = data.attrs || {};
+      for (var key in propsToPass) {
+        if (!component.props || !(key in component.props)) {
+          attrs[key] = propsToPass[key];
+          delete propsToPass[key];
+        }
       }
     }
-    return true
+  }
+
+  function resolveProps (route, config) {
+    switch (typeof config) {
+      case 'undefined':
+        return
+      case 'object':
+        return config
+      case 'function':
+        return config(route)
+      case 'boolean':
+        return config ? route.params : undefined
+      default:
+        {
+          warn(
+            false,
+            "props in \"" + (route.path) + "\" is a " + (typeof config) + ", " +
+            "expecting an object, function or boolean."
+          );
+        }
+    }
   }
 
   /*  */
@@ -495,7 +524,7 @@
   }
 
   function cleanPath (path) {
-    return path.replace(/\/\//g, '/')
+    return path.replace(/\/(?:\s*\/)+/g, '/')
   }
 
   var isarray = Array.isArray || function (arr) {
@@ -1035,6 +1064,10 @@
 
   var noop = function () {};
 
+  var warnedCustomSlot;
+  var warnedTagProp;
+  var warnedEventProp;
+
   var Link = {
     name: 'RouterLink',
     props: {
@@ -1046,11 +1079,17 @@
         type: String,
         default: 'a'
       },
+      custom: Boolean,
       exact: Boolean,
+      exactPath: Boolean,
       append: Boolean,
       replace: Boolean,
       activeClass: String,
       exactActiveClass: String,
+      ariaCurrentValue: {
+        type: String,
+        default: 'page'
+      },
       event: {
         type: eventTypes,
         default: 'click'
@@ -1091,11 +1130,13 @@
         ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
         : route;
 
-      classes[exactActiveClass] = isSameRoute(current, compareTarget);
-      classes[activeClass] = this.exact
+      classes[exactActiveClass] = isSameRoute(current, compareTarget, this.exactPath);
+      classes[activeClass] = this.exact || this.exactPath
         ? classes[exactActiveClass]
         : isIncludedRoute(current, compareTarget);
 
+      var ariaCurrentValue = classes[exactActiveClass] ? this.ariaCurrentValue : null;
+
       var handler = function (e) {
         if (guardEvent(e)) {
           if (this$1.replace) {
@@ -1129,22 +1170,43 @@
         });
 
       if (scopedSlot) {
+        if (!this.custom) {
+          !warnedCustomSlot && warn(false, 'In Kdu Router 4, the k-slot API will by default wrap its content with an <a> element. Use the custom prop to remove this warning:\n<router-link k-slot="{ navigate, href }" custom></router-link>\n');
+          warnedCustomSlot = true;
+        }
         if (scopedSlot.length === 1) {
           return scopedSlot[0]
         } else if (scopedSlot.length > 1 || !scopedSlot.length) {
           {
             warn(
               false,
-              ("RouterLink with to=\"" + (this.to) + "\" is trying to use a scoped slot but it didn't provide exactly one child. Wrapping the content with a span element.")
+              ("<router-link> with to=\"" + (this.to) + "\" is trying to use a scoped slot but it didn't provide exactly one child. Wrapping the content with a span element.")
             );
           }
           return scopedSlot.length === 0 ? h() : h('span', {}, scopedSlot)
         }
       }
 
+      {
+        if ('tag' in this.$options.propsData && !warnedTagProp) {
+          warn(
+            false,
+            "<router-link>'s tag prop is deprecated and has been removed in Kdu Router 4. Use the k-slot API to remove this warning: https://kdujs-router.web.app/guide/migration/#removal-of-event-and-tag-props-in-router-link."
+          );
+          warnedTagProp = true;
+        }
+        if ('event' in this.$options.propsData && !warnedEventProp) {
+          warn(
+            false,
+            "<router-link>'s event prop is deprecated and has been removed in Kdu Router 4. Use the k-slot API to remove this warning: https://kdujs-router.web.app/guide/migration/#removal-of-event-and-tag-props-in-router-link."
+          );
+          warnedEventProp = true;
+        }
+      }
+
       if (this.tag === 'a') {
         data.on = on;
-        data.attrs = { href: href };
+        data.attrs = { href: href, 'aria-current': ariaCurrentValue };
       } else {
         // find the first <a> child and apply listener and href
         var a = findAnchor(this.$slots.default);
@@ -1172,6 +1234,7 @@
 
           var aAttrs = (a.data.attrs = extend({}, a.data.attrs));
           aAttrs.href = href;
+          aAttrs['aria-current'] = ariaCurrentValue;
         } else {
           // doesn't have <a> child, apply listener to self
           data.on = on;
@@ -1276,7 +1339,8 @@
     routes,
     oldPathList,
     oldPathMap,
-    oldNameMap
+    oldNameMap,
+    parentRoute
   ) {
     // the path list is used to control path matching priority
     var pathList = oldPathList || [];
@@ -1286,7 +1350,7 @@
     var nameMap = oldNameMap || Object.create(null);
 
     routes.forEach(function (route) {
-      addRouteRecord(pathList, pathMap, nameMap, route);
+      addRouteRecord(pathList, pathMap, nameMap, route, parentRoute);
     });
 
     // ensure wildcard routes are always at the end
@@ -1335,6 +1399,14 @@
           path || name
         )) + " cannot be a " + "string id. Use an actual component instead."
       );
+
+      warn(
+        // eslint-disable-next-line no-control-regex
+        !/[^\u0000-\u007F]+/.test(path),
+        "Route with path \"" + path + "\" contains unencoded characters, make sure " +
+          "your path is correctly encoded before passing it to the router. Use " +
+          "encodeURI to encode static segments of your path."
+      );
     }
 
     var pathToRegexpOptions =
@@ -1349,7 +1421,13 @@
       path: normalizedPath,
       regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
       components: route.components || { default: route.component },
+      alias: route.alias
+        ? typeof route.alias === 'string'
+          ? [route.alias]
+          : route.alias
+        : [],
       instances: {},
+      enteredCbs: {},
       name: name,
       parent: parent,
       matchAs: matchAs,
@@ -1377,7 +1455,7 @@
           warn(
             false,
             "Named Route '" + (route.name) + "' has a default child route. " +
-              "When navigating to this named route (:to=\"{name: '" + (route.name) + "'\"), " +
+              "When navigating to this named route (:to=\"{name: '" + (route.name) + "'}\"), " +
               "the default child route will not be rendered. Remove the name from " +
               "this route and use the name of the default child route for named " +
               "links instead."
@@ -1401,7 +1479,7 @@
       var aliases = Array.isArray(route.alias) ? route.alias : [route.alias];
       for (var i = 0; i < aliases.length; ++i) {
         var alias = aliases[i];
-        if ( alias === path) {
+        if (alias === path) {
           warn(
             false,
             ("Found an alias with the same value as the path: \"" + path + "\". You have to remove that alias. It will be ignored in development.")
@@ -1428,7 +1506,7 @@
     if (name) {
       if (!nameMap[name]) {
         nameMap[name] = record;
-      } else if ( !matchAs) {
+      } else if (!matchAs) {
         warn(
           false,
           "Duplicate named routes definition: " +
@@ -1484,6 +1562,28 @@
       createRouteMap(routes, pathList, pathMap, nameMap);
     }
 
+    function addRoute (parentOrRoute, route) {
+      var parent = (typeof parentOrRoute !== 'object') ? nameMap[parentOrRoute] : undefined;
+      // $flow-disable-line
+      createRouteMap([route || parentOrRoute], pathList, pathMap, nameMap, parent);
+
+      // add aliases of parent
+      if (parent && parent.alias.length) {
+        createRouteMap(
+          // $flow-disable-line route is defined if parent is
+          parent.alias.map(function (alias) { return ({ path: alias, children: [route] }); }),
+          pathList,
+          pathMap,
+          nameMap,
+          parent
+        );
+      }
+    }
+
+    function getRoutes () {
+      return pathList.map(function (path) { return pathMap[path]; })
+    }
+
     function match (
       raw,
       currentRoute,
@@ -1630,6 +1730,8 @@
 
     return {
       match: match,
+      addRoute: addRoute,
+      getRoutes: getRoutes,
       addRoutes: addRoutes
     }
   }
@@ -1649,10 +1751,9 @@
 
     for (var i = 1, len = m.length; i < len; ++i) {
       var key = regex.keys[i - 1];
-      var val = typeof m[i] === 'string' ? decodeURIComponent(m[i]) : m[i];
       if (key) {
         // Fix #1994: using * with props: true generates a param named 0
-        params[key.name || 'pathMatch'] = val;
+        params[key.name || 'pathMatch'] = typeof m[i] === 'string' ? decode(m[i]) : m[i];
       }
     }
 
@@ -1690,6 +1791,10 @@
   var positionStore = Object.create(null);
 
   function setupScroll () {
+    // Prevent browser scroll behavior on History popstate
+    if ('scrollRestoration' in window.history) {
+      window.history.scrollRestoration = 'manual';
+    }
     // Fix for #1585 for Firefox
     // Fix for #2195 Add optional third attribute to workaround a bug in safari https://bugs.webkit.org/show_bug.cgi?id=182678
     // Fix for #2774 Support for apps loaded from Windows file shares not mapped to network drives: replaced location.origin with
@@ -1701,12 +1806,10 @@
     var stateCopy = extend({}, window.history.state);
     stateCopy.key = getStateKey();
     window.history.replaceState(stateCopy, '', absolutePath);
-    window.addEventListener('popstate', function (e) {
-      saveScrollPosition();
-      if (e.state && e.state.key) {
-        setStateKey(e.state.key);
-      }
-    });
+    window.addEventListener('popstate', handlePopState);
+    return function () {
+      window.removeEventListener('popstate', handlePopState);
+    }
   }
 
   function handleScroll (
@@ -1768,6 +1871,13 @@
     }
   }
 
+  function handlePopState (e) {
+    saveScrollPosition();
+    if (e.state && e.state.key) {
+      setStateKey(e.state.key);
+    }
+  }
+
   function getScrollPosition () {
     var key = getStateKey();
     if (key) {
@@ -1833,7 +1943,17 @@
     }
 
     if (position) {
-      window.scrollTo(position.x, position.y);
+      // $flow-disable-line
+      if ('scrollBehavior' in document.documentElement.style) {
+        window.scrollTo({
+          left: position.x,
+          top: position.y,
+          // $flow-disable-line
+          behavior: shouldScroll.behavior
+        });
+      } else {
+        window.scrollTo(position.x, position.y);
+      }
     }
   }
 
@@ -1853,7 +1973,7 @@
         return false
       }
 
-      return window.history && 'pushState' in window.history
+      return window.history && typeof window.history.pushState === 'function'
     })();
 
   function pushState (url, replace) {
@@ -1898,6 +2018,89 @@
     step(0);
   }
 
+  // When changing thing, also edit router.d.ts
+  var NavigationFailureType = {
+    redirected: 2,
+    aborted: 4,
+    cancelled: 8,
+    duplicated: 16
+  };
+
+  function createNavigationRedirectedError (from, to) {
+    return createRouterError(
+      from,
+      to,
+      NavigationFailureType.redirected,
+      ("Redirected when going from \"" + (from.fullPath) + "\" to \"" + (stringifyRoute(
+        to
+      )) + "\" via a navigation guard.")
+    )
+  }
+
+  function createNavigationDuplicatedError (from, to) {
+    var error = createRouterError(
+      from,
+      to,
+      NavigationFailureType.duplicated,
+      ("Avoided redundant navigation to current location: \"" + (from.fullPath) + "\".")
+    );
+    // backwards compatible with the first introduction of Errors
+    error.name = 'NavigationDuplicated';
+    return error
+  }
+
+  function createNavigationCancelledError (from, to) {
+    return createRouterError(
+      from,
+      to,
+      NavigationFailureType.cancelled,
+      ("Navigation cancelled from \"" + (from.fullPath) + "\" to \"" + (to.fullPath) + "\" with a new navigation.")
+    )
+  }
+
+  function createNavigationAbortedError (from, to) {
+    return createRouterError(
+      from,
+      to,
+      NavigationFailureType.aborted,
+      ("Navigation aborted from \"" + (from.fullPath) + "\" to \"" + (to.fullPath) + "\" via a navigation guard.")
+    )
+  }
+
+  function createRouterError (from, to, type, message) {
+    var error = new Error(message);
+    error._isRouter = true;
+    error.from = from;
+    error.to = to;
+    error.type = type;
+
+    return error
+  }
+
+  var propertiesToLog = ['params', 'query', 'hash'];
+
+  function stringifyRoute (to) {
+    if (typeof to === 'string') { return to }
+    if ('path' in to) { return to.path }
+    var location = {};
+    propertiesToLog.forEach(function (key) {
+      if (key in to) { location[key] = to[key]; }
+    });
+    return JSON.stringify(location, null, 2)
+  }
+
+  function isError (err) {
+    return Object.prototype.toString.call(err).indexOf('Error') > -1
+  }
+
+  function isNavigationFailure (err, errorType) {
+    return (
+      isError(err) &&
+      err._isRouter &&
+      (errorType == null || err.type === errorType)
+    )
+  }
+
   /*  */
 
   function resolveAsyncComponents (matched) {
@@ -1933,7 +2136,7 @@
 
           var reject = once(function (reason) {
             var msg = "Failed to resolve async component " + key + ": " + reason;
-             warn(false, msg);
+            warn(false, msg);
             if (!error) {
               error = isError(reason)
                 ? reason
@@ -2007,33 +2210,6 @@
     }
   }
 
-  var NavigationDuplicated = /*@__PURE__*/(function (Error) {
-    function NavigationDuplicated (normalizedLocation) {
-      Error.call(this);
-      this.name = this._name = 'NavigationDuplicated';
-      // passing the message to super() doesn't seem to work in the transpiled version
-      this.message = "Navigating to current location (\"" + (normalizedLocation.fullPath) + "\") is not allowed";
-      // add a stack property so services like Sentry can correctly display it
-      Object.defineProperty(this, 'stack', {
-        value: new Error().stack,
-        writable: true,
-        configurable: true
-      });
-      // we could also have used
-      // Error.captureStackTrace(this, this.constructor)
-      // but it only exists on node and chrome
-    }
-
-    if ( Error ) NavigationDuplicated.__proto__ = Error;
-    NavigationDuplicated.prototype = Object.create( Error && Error.prototype );
-    NavigationDuplicated.prototype.constructor = NavigationDuplicated;
-
-    return NavigationDuplicated;
-  }(Error));
-
-  // support IE9
-  NavigationDuplicated._name = 'NavigationDuplicated';
-
   /*  */
 
   var History = function History (router, base) {
@@ -2046,6 +2222,7 @@
     this.readyCbs = [];
     this.readyErrorCbs = [];
     this.errorCbs = [];
+    this.listeners = [];
   };
 
   History.prototype.listen = function listen (cb) {
@@ -2074,13 +2251,27 @@
   ) {
       var this$1 = this;
 
-    var route = this.router.match(location, this.current);
+    var route;
+    // catch redirect option
+    try {
+      route = this.router.match(location, this.current);
+    } catch (e) {
+      this.errorCbs.forEach(function (cb) {
+        cb(e);
+      });
+      // Exception should still be thrown
+      throw e
+    }
+    var prev = this.current;
     this.confirmTransition(
       route,
       function () {
         this$1.updateRoute(route);
         onComplete && onComplete(route);
         this$1.ensureURL();
+        this$1.router.afterHooks.forEach(function (hook) {
+          hook && hook(route, prev);
+        });
 
         // fire ready cbs once
         if (!this$1.ready) {
@@ -2095,10 +2286,14 @@
           onAbort(err);
         }
         if (err && !this$1.ready) {
-          this$1.ready = true;
-          this$1.readyErrorCbs.forEach(function (cb) {
-            cb(err);
-          });
+          // Initial redirection should not mark the history as ready yet
+          // because it's triggered by the redirection instead
+          if (!isNavigationFailure(err, NavigationFailureType.redirected) || prev !== START) {
+            this$1.ready = true;
+            this$1.readyErrorCbs.forEach(function (cb) {
+              cb(err);
+            });
+          }
         }
       }
     );
@@ -2108,29 +2303,37 @@
       var this$1 = this;
 
     var current = this.current;
+    this.pending = route;
     var abort = function (err) {
-      // When the user navigates through history through back/forward buttons
-      // we do not want to throw the error. We only throw it if directly calling
-      // push/replace. That's why it's not included in isError
-      if (!isExtendedError(NavigationDuplicated, err) && isError(err)) {
+      // changed after adding errors
+      // before that change, redirect and aborted navigation would produce an err == null
+      if (!isNavigationFailure(err) && isError(err)) {
         if (this$1.errorCbs.length) {
           this$1.errorCbs.forEach(function (cb) {
             cb(err);
           });
         } else {
-          warn(false, 'uncaught error during route navigation:');
+          {
+            warn(false, 'uncaught error during route navigation:');
+          }
           console.error(err);
         }
       }
       onAbort && onAbort(err);
     };
+    var lastRouteIndex = route.matched.length - 1;
+    var lastCurrentIndex = current.matched.length - 1;
     if (
       isSameRoute(route, current) &&
       // in the case the route map has been dynamically appended to
-      route.matched.length === current.matched.length
+      lastRouteIndex === lastCurrentIndex &&
+      route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
     ) {
       this.ensureURL();
-      return abort(new NavigationDuplicated(route))
+      if (route.hash) {
+        handleScroll(this.router, current, route, false);
+      }
+      return abort(createNavigationDuplicatedError(current, route))
     }
 
     var ref = resolveQueue(
@@ -2154,15 +2357,17 @@
       resolveAsyncComponents(activated)
     );
 
-    this.pending = route;
     var iterator = function (hook, next) {
       if (this$1.pending !== route) {
-        return abort()
+        return abort(createNavigationCancelledError(current, route))
       }
       try {
         hook(route, current, function (to) {
-          if (to === false || isError(to)) {
+          if (to === false) {
             // next(false) -> abort navigation, ensure current URL
+            this$1.ensureURL(true);
+            abort(createNavigationAbortedError(current, route));
+          } else if (isError(to)) {
             this$1.ensureURL(true);
             abort(to);
           } else if (
@@ -2171,7 +2376,7 @@
               (typeof to.path === 'string' || typeof to.name === 'string'))
           ) {
             // next('/') or next({ path: '/' }) -> redirect
-            abort();
+            abort(createNavigationRedirectedError(current, route));
             if (typeof to === 'object' && to.replace) {
               this$1.replace(to);
             } else {
@@ -2188,23 +2393,19 @@
     };
 
     runQueue(queue, iterator, function () {
-      var postEnterCbs = [];
-      var isValid = function () { return this$1.current === route; };
       // wait until async components are resolved before
       // extracting in-component enter guards
-      var enterGuards = extractEnterGuards(activated, postEnterCbs, isValid);
+      var enterGuards = extractEnterGuards(activated);
       var queue = enterGuards.concat(this$1.router.resolveHooks);
       runQueue(queue, iterator, function () {
         if (this$1.pending !== route) {
-          return abort()
+          return abort(createNavigationCancelledError(current, route))
         }
         this$1.pending = null;
         onComplete(route);
         if (this$1.router.app) {
           this$1.router.app.$nextTick(function () {
-            postEnterCbs.forEach(function (cb) {
-              cb();
-            });
+            handleRouteEntered(route);
           });
         }
       });
@@ -2212,12 +2413,24 @@
   };
 
   History.prototype.updateRoute = function updateRoute (route) {
-    var prev = this.current;
     this.current = route;
     this.cb && this.cb(route);
-    this.router.afterHooks.forEach(function (hook) {
-      hook && hook(route, prev);
+  };
+
+  History.prototype.setupListeners = function setupListeners () {
+    // Default implementation is empty
+  };
+
+  History.prototype.teardown = function teardown () {
+    // clean up event listeners
+    this.listeners.forEach(function (cleanupListener) {
+      cleanupListener();
     });
+    this.listeners = [];
+
+    // reset current history route
+    this.current = START;
+    this.pending = null;
   };
 
   function normalizeBase (base) {
@@ -2303,15 +2516,13 @@
   }
 
   function extractEnterGuards (
-    activated,
-    cbs,
-    isValid
+    activated
   ) {
     return extractGuards(
       activated,
       'beforeRouteEnter',
       function (guard, _, match, key) {
-        return bindEnterGuard(guard, match, key, cbs, isValid)
+        return bindEnterGuard(guard, match, key)
       }
     )
   }
@@ -2319,68 +2530,56 @@
   function bindEnterGuard (
     guard,
     match,
-    key,
-    cbs,
-    isValid
+    key
   ) {
     return function routeEnterGuard (to, from, next) {
       return guard(to, from, function (cb) {
         if (typeof cb === 'function') {
-          cbs.push(function () {
-            // #750
-            // if a router-view is wrapped with an out-in transition,
-            // the instance may not have been registered at this time.
-            // we will need to poll for registration until current route
-            // is no longer valid.
-            poll(cb, match.instances, key, isValid);
-          });
+          if (!match.enteredCbs[key]) {
+            match.enteredCbs[key] = [];
+          }
+          match.enteredCbs[key].push(cb);
         }
         next(cb);
       })
     }
   }
 
-  function poll (
-    cb, // somehow flow cannot infer this is a function
-    instances,
-    key,
-    isValid
-  ) {
-    if (
-      instances[key] &&
-      !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
-    ) {
-      cb(instances[key]);
-    } else if (isValid()) {
-      setTimeout(function () {
-        poll(cb, instances, key, isValid);
-      }, 16);
-    }
-  }
-
   /*  */
 
   var HTML5History = /*@__PURE__*/(function (History) {
     function HTML5History (router, base) {
+      History.call(this, router, base);
+
+      this._startLocation = getLocation(this.base);
+    }
+
+    if ( History ) HTML5History.__proto__ = History;
+    HTML5History.prototype = Object.create( History && History.prototype );
+    HTML5History.prototype.constructor = HTML5History;
+
+    HTML5History.prototype.setupListeners = function setupListeners () {
       var this$1 = this;
 
-      History.call(this, router, base);
+      if (this.listeners.length > 0) {
+        return
+      }
 
+      var router = this.router;
       var expectScroll = router.options.scrollBehavior;
       var supportsScroll = supportsPushState && expectScroll;
 
       if (supportsScroll) {
-        setupScroll();
+        this.listeners.push(setupScroll());
       }
 
-      var initLocation = getLocation(this.base);
-      window.addEventListener('popstate', function (e) {
+      var handleRoutingEvent = function () {
         var current = this$1.current;
 
         // Avoiding first `popstate` event dispatched in some browsers but first
         // history route not updated since async guard at the same time.
         var location = getLocation(this$1.base);
-        if (this$1.current === START && location === initLocation) {
+        if (this$1.current === START && location === this$1._startLocation) {
           return
         }
 
@@ -2389,12 +2588,12 @@
             handleScroll(router, route, current, true);
           }
         });
+      };
+      window.addEventListener('popstate', handleRoutingEvent);
+      this.listeners.push(function () {
+        window.removeEventListener('popstate', handleRoutingEvent);
       });
-    }
-
-    if ( History ) HTML5History.__proto__ = History;
-    HTML5History.prototype = Object.create( History && History.prototype );
-    HTML5History.prototype.constructor = HTML5History;
+    };
 
     HTML5History.prototype.go = function go (n) {
       window.history.go(n);
@@ -2439,8 +2638,13 @@
   }(History));
 
   function getLocation (base) {
-    var path = decodeURI(window.location.pathname);
-    if (base && path.indexOf(base) === 0) {
+    var path = window.location.pathname;
+    var pathLowerCase = path.toLowerCase();
+    var baseLowerCase = base.toLowerCase();
+    // base="/a" shouldn't turn path="/app" into "/a/pp"
+    // so we ensure the trailing slash in the base
+    if (base && ((pathLowerCase === baseLowerCase) ||
+      (pathLowerCase.indexOf(cleanPath(baseLowerCase + '/')) === 0))) {
       path = path.slice(base.length);
     }
     return (path || '/') + window.location.search + window.location.hash
@@ -2467,31 +2671,40 @@
     HashHistory.prototype.setupListeners = function setupListeners () {
       var this$1 = this;
 
+      if (this.listeners.length > 0) {
+        return
+      }
+
       var router = this.router;
       var expectScroll = router.options.scrollBehavior;
       var supportsScroll = supportsPushState && expectScroll;
 
       if (supportsScroll) {
-        setupScroll();
+        this.listeners.push(setupScroll());
       }
 
-      window.addEventListener(
-        supportsPushState ? 'popstate' : 'hashchange',
-        function () {
-          var current = this$1.current;
-          if (!ensureSlash()) {
-            return
-          }
-          this$1.transitionTo(getHash(), function (route) {
-            if (supportsScroll) {
-              handleScroll(this$1.router, route, current, true);
-            }
-            if (!supportsPushState) {
-              replaceHash(route.fullPath);
-            }
-          });
+      var handleRoutingEvent = function () {
+        var current = this$1.current;
+        if (!ensureSlash()) {
+          return
         }
+        this$1.transitionTo(getHash(), function (route) {
+          if (supportsScroll) {
+            handleScroll(this$1.router, route, current, true);
+          }
+          if (!supportsPushState) {
+            replaceHash(route.fullPath);
+          }
+        });
+      };
+      var eventType = supportsPushState ? 'popstate' : 'hashchange';
+      window.addEventListener(
+        eventType,
+        handleRoutingEvent
       );
+      this.listeners.push(function () {
+        window.removeEventListener(eventType, handleRoutingEvent);
+      });
     };
 
     HashHistory.prototype.push = function push (location, onComplete, onAbort) {
@@ -2570,17 +2783,6 @@
     if (index < 0) { return '' }
 
     href = href.slice(index + 1);
-    // decode the hash but not the search or hash
-    // as search(query) is already decoded
-    var searchIndex = href.indexOf('?');
-    if (searchIndex < 0) {
-      var hashIndex = href.indexOf('#');
-      if (hashIndex > -1) {
-        href = decodeURI(href.slice(0, hashIndex)) + href.slice(hashIndex);
-      } else { href = decodeURI(href); }
-    } else {
-      href = decodeURI(href.slice(0, searchIndex)) + href.slice(searchIndex);
-    }
 
     return href
   }
@@ -2659,11 +2861,15 @@
       this.confirmTransition(
         route,
         function () {
+          var prev = this$1.current;
           this$1.index = targetIndex;
           this$1.updateRoute(route);
+          this$1.router.afterHooks.forEach(function (hook) {
+            hook && hook(route, prev);
+          });
         },
         function (err) {
-          if (isExtendedError(NavigationDuplicated, err)) {
+          if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
             this$1.index = targetIndex;
           }
         }
@@ -2684,11 +2890,12 @@
 
   /*  */
 
-
-
   var KduRouter = function KduRouter (options) {
     if ( options === void 0 ) options = {};
 
+    {
+      warn(this instanceof KduRouter, "Router must be called with the new operator.");
+    }
     this.app = null;
     this.apps = [];
     this.options = options;
@@ -2698,7 +2905,8 @@
     this.matcher = createMatcher(options.routes || [], this);
 
     var mode = options.mode || 'hash';
-    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false;
+    this.fallback =
+      mode === 'history' && !supportsPushState && options.fallback !== false;
     if (this.fallback) {
       mode = 'hash';
     }
@@ -2726,11 +2934,7 @@
 
   var prototypeAccessors = { currentRoute: { configurable: true } };
 
-  KduRouter.prototype.match = function match (
-    raw,
-    current,
-    redirectedFrom
-  ) {
+  KduRouter.prototype.match = function match (raw, current, redirectedFrom) {
     return this.matcher.match(raw, current, redirectedFrom)
   };
 
@@ -2741,11 +2945,11 @@
   KduRouter.prototype.init = function init (app /* Kdu component instance */) {
       var this$1 = this;
 
-     assert(
-      install.installed,
-      "not installed. Make sure to call `Kdu.use(KduRouter)` " +
-      "before creating root instance."
-    );
+    assert(
+        install.installed,
+        "not installed. Make sure to call `Kdu.use(KduRouter)` " +
+          "before creating root instance."
+      );
 
     this.apps.push(app);
 
@@ -2757,6 +2961,8 @@
       // ensure we still have a main app or null if no apps
       // we do not release the router so it can be reused
       if (this$1.app === app) { this$1.app = this$1.apps[0] || null; }
+
+      if (!this$1.app) { this$1.history.teardown(); }
     });
 
     // main app previously initialized
@@ -2769,16 +2975,24 @@
 
     var history = this.history;
 
-    if (history instanceof HTML5History) {
-      history.transitionTo(history.getCurrentLocation());
-    } else if (history instanceof HashHistory) {
-      var setupHashListener = function () {
+    if (history instanceof HTML5History || history instanceof HashHistory) {
+      var handleInitialScroll = function (routeOrError) {
+        var from = history.current;
+        var expectScroll = this$1.options.scrollBehavior;
+        var supportsScroll = supportsPushState && expectScroll;
+
+        if (supportsScroll && 'fullPath' in routeOrError) {
+          handleScroll(this$1, routeOrError, from, false);
+        }
+      };
+      var setupListeners = function (routeOrError) {
         history.setupListeners();
+        handleInitialScroll(routeOrError);
       };
       history.transitionTo(
         history.getCurrentLocation(),
-        setupHashListener,
-        setupHashListener
+        setupListeners,
+        setupListeners
       );
     }
 
@@ -2856,11 +3070,14 @@
     if (!route) {
       return []
     }
-    return [].concat.apply([], route.matched.map(function (m) {
-      return Object.keys(m.components).map(function (key) {
-        return m.components[key]
+    return [].concat.apply(
+      [],
+      route.matched.map(function (m) {
+        return Object.keys(m.components).map(function (key) {
+          return m.components[key]
+        })
       })
-    }))
+    )
   };
 
   KduRouter.prototype.resolve = function resolve (
@@ -2869,12 +3086,7 @@
     append
   ) {
     current = current || this.history.current;
-    var location = normalizeLocation(
-      to,
-      current,
-      append,
-      this
-    );
+    var location = normalizeLocation(to, current, append, this);
     var route = this.match(location, current);
     var fullPath = route.redirectedFrom || route.fullPath;
     var base = this.history.base;
@@ -2889,7 +3101,21 @@
     }
   };
 
+  KduRouter.prototype.getRoutes = function getRoutes () {
+    return this.matcher.getRoutes()
+  };
+
+  KduRouter.prototype.addRoute = function addRoute (parentOrRoute, route) {
+    this.matcher.addRoute(parentOrRoute, route);
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation());
+    }
+  };
+
   KduRouter.prototype.addRoutes = function addRoutes (routes) {
+    {
+      warn(false, 'router.addRoutes() is deprecated and has been removed in Kdu Router 4. Use router.addRoute() instead.');
+    }
     this.matcher.addRoutes(routes);
     if (this.history.current !== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
@@ -2912,7 +3138,10 @@
   }
 
   KduRouter.install = install;
-  KduRouter.version = '3.1.7';
+  KduRouter.version = '3.5.4';
+  KduRouter.isNavigationFailure = isNavigationFailure;
+  KduRouter.NavigationFailureType = NavigationFailureType;
+  KduRouter.START_LOCATION = START;
 
   if (inBrowser && window.Kdu) {
     window.Kdu.use(KduRouter);