kdu-router 3.4.0-beta.0 → 3.5.4

package/dist/kdu-router.esm.browser.js

@@ -1,5 +1,5 @@
 /*!
-  * kdu-router v3.4.0-beta.0
+  * kdu-router v3.5.4
   * (c) 2022 NKDuy
   * @license MIT
   */
@@ -12,7 +12,7 @@ function assert (condition, message) {
 }
 
 function warn (condition, message) {
-  if ( !condition) {
+  if (!condition) {
     typeof console !== 'undefined' && console.warn(`[kdu-router] ${message}`);
   }
 }
@@ -24,153 +24,6 @@ function extend (a, b) {
   return a
 }
 
-var View = {
-  name: 'RouterView',
-  functional: true,
-  props: {
-    name: {
-      type: String,
-      default: 'default'
-    }
-  },
-  render (_, { props, children, parent, 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
-    const h = parent.$createElement;
-    const name = props.name;
-    const route = parent.$route;
-    const cache = parent._routerViewCache || (parent._routerViewCache = {});
-
-    // determine current view depth, also check to see if the tree
-    // has been toggled inactive but kept-alive.
-    let depth = 0;
-    let inactive = false;
-    while (parent && parent._routerRoot !== parent) {
-      const 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) {
-      const cachedData = cache[name];
-      const 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()
-      }
-    }
-
-    const matched = route.matched[depth];
-    const 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 };
-
-    // attach instance registration hook
-    // this will be called in the instance's injected lifecycle hooks
-    data.registerRouteInstance = (vm, val) => {
-      // val could be undefined for unregistration
-      const 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 = (_, knode) => {
-      matched.instances[name] = knode.componentInstance;
-    };
-
-    // register instance in init hook
-    // in case kept-alive component be actived when routes changed
-    data.hook.init = (knode) => {
-      if (knode.data.keepAlive &&
-        knode.componentInstance &&
-        knode.componentInstance !== matched.instances[name]
-      ) {
-        matched.instances[name] = knode.componentInstance;
-      }
-    };
-
-    const configProps = matched.props && matched.props[name];
-    // save route and configProps in cache
-    if (configProps) {
-      extend(cache[name], {
-        route,
-        configProps
-      });
-      fillPropsinData(component, data, route, configProps);
-    }
-
-    return h(component, data, children)
-  }
-};
-
-function fillPropsinData (component, data, route, configProps) {
-  // resolve props
-  let propsToPass = data.props = resolveProps(route, configProps);
-  if (propsToPass) {
-    // clone to prevent mutation
-    propsToPass = data.props = extend({}, propsToPass);
-    // pass non-declared props as attrs
-    const attrs = data.attrs = data.attrs || {};
-    for (const 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.`
-        );
-      }
-  }
-}
-
 /*  */
 
 const encodeReserveRE = /[!'()*]/g;
@@ -180,11 +33,21 @@ const commaRE = /%2C/g;
 // fixed encodeURIComponent which is more conformant to RFC3986:
 // - escapes [!'()*]
 // - preserve commas
-const encode = str => encodeURIComponent(str)
-  .replace(encodeReserveRE, encodeReserveReplacer)
-  .replace(commaRE, ',');
+const encode = str =>
+  encodeURIComponent(str)
+    .replace(encodeReserveRE, encodeReserveReplacer)
+    .replace(commaRE, ',');
 
-const decode = decodeURIComponent;
+function decode (str) {
+  try {
+    return decodeURIComponent(str)
+  } catch (err) {
+    {
+      warn(false, `Error decoding "${str}". Leaving it intact.`);
+    }
+  }
+  return str
+}
 
 function resolveQuery (
   query,
@@ -196,16 +59,20 @@ function resolveQuery (
   try {
     parsedQuery = parse(query || '');
   } catch (e) {
-     warn(false, e.message);
+    warn(false, e.message);
     parsedQuery = {};
   }
   for (const key in extraQuery) {
     const value = extraQuery[key];
-    parsedQuery[key] = Array.isArray(value) ? value.map(v => '' + v) : '' + value;
+    parsedQuery[key] = Array.isArray(value)
+      ? value.map(castQueryParamValue)
+      : castQueryParamValue(value);
   }
   return parsedQuery
 }
 
+const castQueryParamValue = value => (value == null || typeof value === 'object' ? value : String(value));
+
 function parseQuery (query) {
   const res = {};
 
@@ -218,9 +85,7 @@ function parseQuery (query) {
   query.split('&').forEach(param => {
     const parts = param.replace(/\+/g, ' ').split('=');
     const key = decode(parts.shift());
-    const val = parts.length > 0
-      ? decode(parts.join('='))
-      : null;
+    const val = parts.length > 0 ? decode(parts.join('=')) : null;
 
     if (res[key] === undefined) {
       res[key] = val;
@@ -235,34 +100,39 @@ function parseQuery (query) {
 }
 
 function stringifyQuery (obj) {
-  const res = obj ? Object.keys(obj).map(key => {
-    const val = obj[key];
+  const res = obj
+    ? Object.keys(obj)
+      .map(key => {
+        const val = obj[key];
 
-    if (val === undefined) {
-      return ''
-    }
-
-    if (val === null) {
-      return encode(key)
-    }
+        if (val === undefined) {
+          return ''
+        }
 
-    if (Array.isArray(val)) {
-      const result = [];
-      val.forEach(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)) {
+          const result = [];
+          val.forEach(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(x => x.length > 0).join('&') : null;
+        return encode(key) + '=' + encode(val)
+      })
+      .filter(x => x.length > 0)
+      .join('&')
+    : null;
   return res ? `?${res}` : ''
 }
 
@@ -335,23 +205,23 @@ function getFullPath (
   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
@@ -361,14 +231,18 @@ function isSameRoute (a, b) {
 function isObjectEqual (a = {}, b = {}) {
   // handle null value #1566
   if (!a || !b) return a === b
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
+  const aKeys = Object.keys(a).sort();
+  const bKeys = Object.keys(b).sort();
   if (aKeys.length !== bKeys.length) {
     return false
   }
-  return aKeys.every(key => {
+  return aKeys.every((key, i) => {
     const aVal = a[key];
+    const bKey = bKeys[i];
+    if (bKey !== key) return false
     const 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)
@@ -396,6 +270,173 @@ function queryIncludes (current, target) {
   return true
 }
 
+function handleRouteEntered (route) {
+  for (let i = 0; i < route.matched.length; i++) {
+    const record = route.matched[i];
+    for (const name in record.instances) {
+      const instance = record.instances[name];
+      const cbs = record.enteredCbs[name];
+      if (!instance || !cbs) continue
+      delete record.enteredCbs[name];
+      for (let i = 0; i < cbs.length; i++) {
+        if (!instance._isBeingDestroyed) cbs[i](instance);
+      }
+    }
+  }
+}
+
+var View = {
+  name: 'RouterView',
+  functional: true,
+  props: {
+    name: {
+      type: String,
+      default: 'default'
+    }
+  },
+  render (_, { props, children, parent, 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
+    const h = parent.$createElement;
+    const name = props.name;
+    const route = parent.$route;
+    const cache = parent._routerViewCache || (parent._routerViewCache = {});
+
+    // determine current view depth, also check to see if the tree
+    // has been toggled inactive but kept-alive.
+    let depth = 0;
+    let inactive = false;
+    while (parent && parent._routerRoot !== parent) {
+      const 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) {
+      const cachedData = cache[name];
+      const 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()
+      }
+    }
+
+    const matched = route.matched[depth];
+    const 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 };
+
+    // attach instance registration hook
+    // this will be called in the instance's injected lifecycle hooks
+    data.registerRouteInstance = (vm, val) => {
+      // val could be undefined for unregistration
+      const 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 = (_, knode) => {
+      matched.instances[name] = knode.componentInstance;
+    };
+
+    // register instance in init hook
+    // in case kept-alive component be actived when routes changed
+    data.hook.init = (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);
+    };
+
+    const configProps = matched.props && matched.props[name];
+    // save route and configProps in cache
+    if (configProps) {
+      extend(cache[name], {
+        route,
+        configProps
+      });
+      fillPropsinData(component, data, route, configProps);
+    }
+
+    return h(component, data, children)
+  }
+};
+
+function fillPropsinData (component, data, route, configProps) {
+  // resolve props
+  let propsToPass = data.props = resolveProps(route, configProps);
+  if (propsToPass) {
+    // clone to prevent mutation
+    propsToPass = data.props = extend({}, propsToPass);
+    // pass non-declared props as attrs
+    const attrs = data.attrs = data.attrs || {};
+    for (const 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.`
+        );
+      }
+  }
+}
+
 /*  */
 
 function resolvePath (
@@ -464,7 +505,7 @@ function parsePath (path) {
 }
 
 function cleanPath (path) {
-  return path.replace(/\/\//g, '/')
+  return path.replace(/\/(?:\s*\/)+/g, '/')
 }
 
 var isarray = Array.isArray || function (arr) {
@@ -1004,6 +1045,10 @@ const eventTypes = [String, Array];
 
 const noop = () => {};
 
+let warnedCustomSlot;
+let warnedTagProp;
+let warnedEventProp;
+
 var Link = {
   name: 'RouterLink',
   props: {
@@ -1015,7 +1060,9 @@ var Link = {
       type: String,
       default: 'a'
     },
+    custom: Boolean,
     exact: Boolean,
+    exactPath: Boolean,
     append: Boolean,
     replace: Boolean,
     activeClass: String,
@@ -1059,8 +1106,8 @@ var Link = {
       ? 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);
 
@@ -1099,13 +1146,17 @@ var Link = {
       });
 
     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="${
+            `<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.`
           );
@@ -1114,6 +1165,23 @@ var Link = {
       }
     }
 
+    {
+      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, 'aria-current': ariaCurrentValue };
@@ -1249,7 +1317,8 @@ function createRouteMap (
   routes,
   oldPathList,
   oldPathMap,
-  oldNameMap
+  oldNameMap,
+  parentRoute
 ) {
   // the path list is used to control path matching priority
   const pathList = oldPathList || [];
@@ -1259,7 +1328,7 @@ function createRouteMap (
   const nameMap = oldNameMap || Object.create(null);
 
   routes.forEach(route => {
-    addRouteRecord(pathList, pathMap, nameMap, route);
+    addRouteRecord(pathList, pathMap, nameMap, route, parentRoute);
   });
 
   // ensure wildcard routes are always at the end
@@ -1307,6 +1376,14 @@ function addRouteRecord (
         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.`
+    );
   }
 
   const pathToRegexpOptions =
@@ -1321,7 +1398,13 @@ function addRouteRecord (
     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,
     parent,
     matchAs,
@@ -1351,7 +1434,7 @@ function addRouteRecord (
           `Named Route '${route.name}' has a default child route. ` +
             `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.`
@@ -1375,7 +1458,7 @@ function addRouteRecord (
     const aliases = Array.isArray(route.alias) ? route.alias : [route.alias];
     for (let i = 0; i < aliases.length; ++i) {
       const 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.`
@@ -1402,7 +1485,7 @@ function addRouteRecord (
   if (name) {
     if (!nameMap[name]) {
       nameMap[name] = record;
-    } else if ( !matchAs) {
+    } else if (!matchAs) {
       warn(
         false,
         `Duplicate named routes definition: ` +
@@ -1455,6 +1538,28 @@ function createMatcher (
     createRouteMap(routes, pathList, pathMap, nameMap);
   }
 
+  function addRoute (parentOrRoute, route) {
+    const 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(alias => ({ path: alias, children: [route] })),
+        pathList,
+        pathMap,
+        nameMap,
+        parent
+      );
+    }
+  }
+
+  function getRoutes () {
+    return pathList.map(path => pathMap[path])
+  }
+
   function match (
     raw,
     currentRoute,
@@ -1598,6 +1703,8 @@ function createMatcher (
 
   return {
     match,
+    addRoute,
+    getRoutes,
     addRoutes
   }
 }
@@ -1617,10 +1724,9 @@ function matchRoute (
 
   for (let i = 1, len = m.length; i < len; ++i) {
     const key = regex.keys[i - 1];
-    const 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];
     }
   }
 
@@ -1810,7 +1916,17 @@ function scrollToPosition (shouldScroll, position) {
   }
 
   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);
+    }
   }
 }
 
@@ -1875,6 +1991,7 @@ function runQueue (queue, fn, cb) {
   step(0);
 }
 
+// When changing thing, also edit router.d.ts
 const NavigationFailureType = {
   redirected: 2,
   aborted: 4,
@@ -1996,7 +2113,7 @@ function resolveAsyncComponents (matched) {
 
         const reject = once(reason => {
           const msg = `Failed to resolve async component ${key}: ${reason}`;
-           warn(false, msg);
+          warn(false, msg);
           if (!error) {
             error = isError(reason)
               ? reason
@@ -2128,6 +2245,7 @@ class History {
     onAbort
   ) {
     let route;
+    // catch redirect option
     try {
       route = this.router.match(location, this.current);
     } catch (e) {
@@ -2137,10 +2255,10 @@ class History {
       // Exception should still be thrown
       throw e
     }
+    const prev = this.current;
     this.confirmTransition(
       route,
       () => {
-        const prev = this.current;
         this.updateRoute(route);
         onComplete && onComplete(route);
         this.ensureURL();
@@ -2161,16 +2279,13 @@ class History {
           onAbort(err);
         }
         if (err && !this.ready) {
-          this.ready = true;
-          // Initial redirection should still trigger the onReady onSuccess
-          if (!isNavigationFailure(err, NavigationFailureType.redirected)) {
+          // 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.ready = true;
             this.readyErrorCbs.forEach(cb => {
               cb(err);
             });
-          } else {
-            this.readyCbs.forEach(cb => {
-              cb(route);
-            });
           }
         }
       }
@@ -2179,16 +2294,19 @@ class History {
 
   confirmTransition (route, onComplete, onAbort) {
     const current = this.current;
+    this.pending = route;
     const abort = err => {
-      // changed after adding errors before that change,
-      // redirect and aborted navigation would produce an err == null
+      // changed after adding errors
+      // before that change, redirect and aborted navigation would produce an err == null
       if (!isNavigationFailure(err) && isError(err)) {
         if (this.errorCbs.length) {
           this.errorCbs.forEach(cb => {
             cb(err);
           });
         } else {
-          warn(false, 'uncaught error during route navigation:');
+          {
+            warn(false, 'uncaught error during route navigation:');
+          }
           console.error(err);
         }
       }
@@ -2203,6 +2321,9 @@ class History {
       route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
     ) {
       this.ensureURL();
+      if (route.hash) {
+        handleScroll(this.router, current, route, false);
+      }
       return abort(createNavigationDuplicatedError(current, route))
     }
 
@@ -2224,7 +2345,6 @@ class History {
       resolveAsyncComponents(activated)
     );
 
-    this.pending = route;
     const iterator = (hook, next) => {
       if (this.pending !== route) {
         return abort(createNavigationCancelledError(current, route))
@@ -2261,11 +2381,9 @@ class History {
     };
 
     runQueue(queue, iterator, () => {
-      const postEnterCbs = [];
-      const isValid = () => this.current === route;
       // wait until async components are resolved before
       // extracting in-component enter guards
-      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid);
+      const enterGuards = extractEnterGuards(activated);
       const queue = enterGuards.concat(this.router.resolveHooks);
       runQueue(queue, iterator, () => {
         if (this.pending !== route) {
@@ -2275,9 +2393,7 @@ class History {
         onComplete(route);
         if (this.router.app) {
           this.router.app.$nextTick(() => {
-            postEnterCbs.forEach(cb => {
-              cb();
-            });
+            handleRouteEntered(route);
           });
         }
       });
@@ -2293,11 +2409,16 @@ class History {
     // Default implementation is empty
   }
 
-  teardownListeners () {
+  teardown () {
+    // clean up event listeners
     this.listeners.forEach(cleanupListener => {
       cleanupListener();
     });
     this.listeners = [];
+
+    // reset current history route
+    this.current = START;
+    this.pending = null;
   }
 }
 
@@ -2384,15 +2505,13 @@ function bindGuard (guard, instance) {
 }
 
 function extractEnterGuards (
-  activated,
-  cbs,
-  isValid
+  activated
 ) {
   return extractGuards(
     activated,
     'beforeRouteEnter',
     (guard, _, match, key) => {
-      return bindEnterGuard(guard, match, key, cbs, isValid)
+      return bindEnterGuard(guard, match, key)
     }
   )
 }
@@ -2400,45 +2519,21 @@ function extractEnterGuards (
 function bindEnterGuard (
   guard,
   match,
-  key,
-  cbs,
-  isValid
+  key
 ) {
   return function routeEnterGuard (to, from, next) {
     return guard(to, from, cb => {
       if (typeof cb === 'function') {
-        cbs.push(() => {
-          // #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(() => {
-      poll(cb, instances, key, isValid);
-    }, 16);
-  }
-}
-
 /*  */
 
 class HTML5History extends History {
@@ -2520,8 +2615,13 @@ class HTML5History extends History {
 }
 
 function getLocation (base) {
-  let path = decodeURI(window.location.pathname);
-  if (base && path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
+  let path = window.location.pathname;
+  const pathLowerCase = path.toLowerCase();
+  const 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
@@ -2646,17 +2746,6 @@ function getHash () {
   if (index < 0) return ''
 
   href = href.slice(index + 1);
-  // decode the hash but not the search or hash
-  // as search(query) is already decoded
-  const searchIndex = href.indexOf('?');
-  if (searchIndex < 0) {
-    const 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
 }
@@ -2728,8 +2817,12 @@ class AbstractHistory extends History {
     this.confirmTransition(
       route,
       () => {
+        const prev = this.current;
         this.index = targetIndex;
         this.updateRoute(route);
+        this.router.afterHooks.forEach(hook => {
+          hook && hook(route, prev);
+        });
       },
       err => {
         if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
@@ -2756,6 +2849,7 @@ class KduRouter {
   
   
   
+  
 
   
   
@@ -2771,6 +2865,9 @@ class KduRouter {
   
 
   constructor (options = {}) {
+    {
+      warn(this instanceof KduRouter, `Router must be called with the new operator.`);
+    }
     this.app = null;
     this.apps = [];
     this.options = options;
@@ -2816,8 +2913,7 @@ class KduRouter {
   }
 
   init (app /* Kdu component instance */) {
-    
-      assert(
+    assert(
         install.installed,
         `not installed. Make sure to call \`Kdu.use(KduRouter)\` ` +
           `before creating root instance.`
@@ -2834,10 +2930,7 @@ class KduRouter {
       // we do not release the router so it can be reused
       if (this.app === app) this.app = this.apps[0] || null;
 
-      if (!this.app) {
-        // clean up event listeners
-        this.history.teardownListeners();
-      }
+      if (!this.app) this.history.teardown();
     });
 
     // main app previously initialized
@@ -2972,7 +3065,21 @@ class KduRouter {
     }
   }
 
+  getRoutes () {
+    return this.matcher.getRoutes()
+  }
+
+  addRoute (parentOrRoute, route) {
+    this.matcher.addRoute(parentOrRoute, route);
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation());
+    }
+  }
+
   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());
@@ -2994,9 +3101,10 @@ function createHref (base, fullPath, mode) {
 }
 
 KduRouter.install = install;
-KduRouter.version = '3.4.0-beta.0';
+KduRouter.version = '3.5.4';
 KduRouter.isNavigationFailure = isNavigationFailure;
 KduRouter.NavigationFailureType = NavigationFailureType;
+KduRouter.START_LOCATION = START;
 
 if (inBrowser && window.Kdu) {
   window.Kdu.use(KduRouter);