kdu-router 4.0.16 → 4.2.0

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

@@ -1,70 +1,33 @@
 /*!
-  * kdu-router v4.0.16
-  * (c) 2022 NKDuy
+  * kdu-router v4.2.0
+  * (c) 2024 NKDuy
   * @license MIT
   */
 import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, nextTick } from 'kdu';
 import { setupDevtoolsPlugin } from '@kdujs/devtools-api';
 
-const hasSymbol = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
-const PolySymbol = (name) => 
-// kr = kdu router
-hasSymbol
-    ? Symbol('[kdu-router]: ' + name )
-    : ('[kdu-router]: ' ) + name;
-// rvlm = Router View Location Matched
-/**
- * RouteRecord being rendered by the closest ancestor Router View. Used for
- * `onBeforeRouteUpdate` and `onBeforeRouteLeave`. rvlm stands for Router View
- * Location Matched
- *
- * @internal
- */
-const matchedRouteKey = /*#__PURE__*/ PolySymbol('router view location matched' );
-/**
- * Allows overriding the router view depth to control which component in
- * `matched` is rendered. rvd stands for Router View Depth
- *
- * @internal
- */
-const viewDepthKey = /*#__PURE__*/ PolySymbol('router view depth' );
-/**
- * Allows overriding the router instance returned by `useRouter` in tests. r
- * stands for router
- *
- * @internal
- */
-const routerKey = /*#__PURE__*/ PolySymbol('router' );
-/**
- * Allows overriding the current route returned by `useRoute` in tests. rl
- * stands for route location
- *
- * @internal
- */
-const routeLocationKey = /*#__PURE__*/ PolySymbol('route location' );
-/**
- * Allows overriding the current route used by router-view. Internally this is
- * used when the `route` prop is passed.
- *
- * @internal
- */
-const routerViewLocationKey = /*#__PURE__*/ PolySymbol('router view location' );
-
 const isBrowser = typeof window !== 'undefined';
 
 function isESModule(obj) {
-    return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module');
+    return obj.__esModule || obj[Symbol.toStringTag] === 'Module';
 }
 const assign = Object.assign;
 function applyToParams(fn, params) {
     const newParams = {};
     for (const key in params) {
         const value = params[key];
-        newParams[key] = Array.isArray(value) ? value.map(fn) : fn(value);
+        newParams[key] = isArray(value)
+            ? value.map(fn)
+            : fn(value);
     }
     return newParams;
 }
-const noop = () => { };
+const noop = () => { };
+/**
+ * Typesafe alternative to Array.isArray
+ * https://github.com/microsoft/TypeScript/pull/48228
+ */
+const isArray = Array.isArray;
 
 function warn(msg) {
     // avoid using ...args as it breaks in older Edge builds
@@ -75,7 +38,7 @@ function warn(msg) {
 const TRAILING_SLASH_RE = /\/$/;
 const removeTrailingSlash = (path) => path.replace(TRAILING_SLASH_RE, '');
 /**
- * Transforms an URI into a normalized history location
+ * Transforms a URI into a normalized history location
  *
  * @param parseQuery
  * @param location - URI to normalize
@@ -86,8 +49,13 @@ const removeTrailingSlash = (path) => path.replace(TRAILING_SLASH_RE, '');
 function parseURL(parseQuery, location, currentLocation = '/') {
     let path, query = {}, searchString = '', hash = '';
     // Could use URL and URLSearchParams but IE 11 doesn't support it
-    const searchPos = location.indexOf('?');
-    const hashPos = location.indexOf('#', searchPos > -1 ? searchPos : 0);
+    // TODO: move to new URL()
+    const hashPos = location.indexOf('#');
+    let searchPos = location.indexOf('?');
+    // the hash appears before the search, so it's not part of the search string
+    if (hashPos < searchPos && hashPos >= 0) {
+        searchPos = -1;
+    }
     if (searchPos > -1) {
         path = location.slice(0, searchPos);
         searchString = location.slice(searchPos + 1, hashPos > -1 ? hashPos : location.length);
@@ -119,8 +87,7 @@ function stringifyURL(stringifyQuery, location) {
     return location.path + (query && '?') + query + (location.hash || '');
 }
 /**
- * Strips off the base from the beginning of a location.pathname in a non
- * case-sensitive way.
+ * Strips off the base from the beginning of a location.pathname in a non-case-sensitive way.
  *
  * @param pathname - location.pathname
  * @param base - base to strip off
@@ -136,6 +103,7 @@ function stripBase(pathname, base) {
  * pointing towards the same {@link RouteRecord} and that all `params`, `query`
  * parameters and `hash` are the same
  *
+ * @param stringifyQuery - A function that takes a query object of type LocationQueryRaw and returns a string representation of it.
  * @param a - first {@link RouteLocation}
  * @param b - second {@link RouteLocation}
  */
@@ -172,9 +140,9 @@ function isSameRouteLocationParams(a, b) {
     return true;
 }
 function isSameRouteLocationParamsValue(a, b) {
-    return Array.isArray(a)
+    return isArray(a)
         ? isEquivalentArray(a, b)
-        : Array.isArray(b)
+        : isArray(b)
             ? isEquivalentArray(b, a)
             : a === b;
 }
@@ -186,7 +154,7 @@ function isSameRouteLocationParamsValue(a, b) {
  * @param b - array of values or a single value
  */
 function isEquivalentArray(a, b) {
-    return Array.isArray(b)
+    return isArray(b)
         ? a.length === b.length && a.every((value, i) => value === b[i])
         : a.length === 1 && a[0] === b;
 }
@@ -207,23 +175,35 @@ function resolveRelativePath(to, from) {
         return from;
     const fromSegments = from.split('/');
     const toSegments = to.split('/');
+    const lastToSegment = toSegments[toSegments.length - 1];
+    // make . and ./ the same (../ === .., ../../ === ../..)
+    // this is the same behavior as new URL()
+    if (lastToSegment === '..' || lastToSegment === '.') {
+        toSegments.push('');
+    }
     let position = fromSegments.length - 1;
     let toPosition;
     let segment;
     for (toPosition = 0; toPosition < toSegments.length; toPosition++) {
         segment = toSegments[toPosition];
-        // can't go below zero
-        if (position === 1 || segment === '.')
+        // we stay on the same position
+        if (segment === '.')
             continue;
-        if (segment === '..')
-            position--;
-        // found something that is not relative path
+        // go up in the from array
+        if (segment === '..') {
+            // we can't go below zero, but we still need to increment toPosition
+            if (position > 1)
+                position--;
+            // continue
+        }
+        // we reached a non-relative path, we stop here
         else
             break;
     }
     return (fromSegments.slice(0, position).join('/') +
         '/' +
         toSegments
+            // ensure we use at least the last element in the toSegments
             .slice(toPosition - (toPosition === toSegments.length ? 1 : 0))
             .join('/'));
 }
@@ -387,7 +367,8 @@ function getSavedScrollPosition(key) {
 let createBaseLocation = () => location.protocol + '//' + location.host;
 /**
  * Creates a normalized history location from a window.location object
- * @param location -
+ * @param base - The base path
+ * @param location - The window.location object
  */
 function createCurrentLocation(base, location) {
     const { pathname, search, hash } = location;
@@ -452,7 +433,7 @@ function useHistoryListeners(base, historyState, currentLocation, replace) {
         pauseState = currentLocation.value;
     }
     function listen(callback) {
-        // setup the listener and prepare teardown callbacks
+        // set up the listener and prepare teardown callbacks
         listeners.push(callback);
         const teardown = () => {
             const index = listeners.indexOf(callback);
@@ -475,9 +456,13 @@ function useHistoryListeners(base, historyState, currentLocation, replace) {
         window.removeEventListener('popstate', popStateHandler);
         window.removeEventListener('beforeunload', beforeUnloadListener);
     }
-    // setup the listeners and prepare teardown callbacks
+    // set up the listeners and prepare teardown callbacks
     window.addEventListener('popstate', popStateHandler);
-    window.addEventListener('beforeunload', beforeUnloadListener);
+    // TODO: could we use 'pagehide' or 'visibilitychange' instead?
+    // https://developer.chrome.com/blog/page-lifecycle-api/
+    window.addEventListener('beforeunload', beforeUnloadListener, {
+        passive: true,
+    });
     return {
         pauseListeners,
         listen,
@@ -513,14 +498,14 @@ function useHistoryStateNavigation(base) {
             // the length is off by one, we need to decrease it
             position: history.length - 1,
             replaced: true,
-            // don't add a scroll as the user may have an anchor and we want
+            // don't add a scroll as the user may have an anchor, and we want
             // scrollBehavior to be triggered without a saved position
             scroll: null,
         }, true);
     }
     function changeLocation(to, state, replace) {
         /**
-         * if a base tag is provided and we are on a normal domain, we have to
+         * if a base tag is provided, and we are on a normal domain, we have to
          * respect the provided `base` attribute because pushState() will use it and
          * potentially erase anything before the `#` where a base of
          * `/folder/#` but a base of `/` would erase the `/folder/` section. If
@@ -614,7 +599,7 @@ function createWebHistory(base) {
 }
 
 /**
- * Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere.
+ * Creates an in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere.
  * It's up to the user to replace that location with the starter location by either calling `router.push` or `router.replace`.
  *
  * @param base - Base applied to all urls, defaults to '/'
@@ -699,15 +684,13 @@ function createMemoryHistory(base = '') {
 }
 
 /**
- * Creates a hash history. Useful for web applications with no host (e.g.
- * `file://`) or when configuring a server to handle any URL is not possible.
+ * Creates a hash history. Useful for web applications with no host (e.g. `file://`) or when configuring a server to
+ * handle any URL is not possible.
  *
- * @param base - optional base to provide. Defaults to `location.pathname +
- * location.search` If there is a `<base>` tag in the `head`, its value will be
- * ignored in favor of this parameter **but note it affects all the
- * history.pushState() calls**, meaning that if you use a `<base>` tag, it's
- * `href` value **has to match this parameter** (ignoring anything after the
- * `#`).
+ * @param base - optional base to provide. Defaults to `location.pathname + location.search` If there is a `<base>` tag
+ * in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState()
+ * calls**, meaning that if you use a `<base>` tag, it's `href` value **has to match this parameter** (ignoring anything
+ * after the `#`).
  *
  * @example
  * ```js
@@ -772,7 +755,7 @@ const START_LOCATION_NORMALIZED = {
     redirectedFrom: undefined,
 };
 
-const NavigationFailureSymbol = /*#__PURE__*/ PolySymbol('navigation failure' );
+const NavigationFailureSymbol = Symbol('navigation failure' );
 /**
  * Enumeration with all possible types for navigation failures. Can be passed to
  * {@link isNavigationFailure} to check for specific failures.
@@ -797,21 +780,21 @@ var NavigationFailureType;
 })(NavigationFailureType || (NavigationFailureType = {}));
 // DEV only debug messages
 const ErrorTypeMessages = {
-    [1 /* MATCHER_NOT_FOUND */]({ location, currentLocation }) {
+    [1 /* ErrorTypes.MATCHER_NOT_FOUND */]({ location, currentLocation }) {
         return `No match for\n ${JSON.stringify(location)}${currentLocation
             ? '\nwhile being at\n' + JSON.stringify(currentLocation)
             : ''}`;
     },
-    [2 /* NAVIGATION_GUARD_REDIRECT */]({ from, to, }) {
+    [2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */]({ from, to, }) {
         return `Redirected from "${from.fullPath}" to "${stringifyRoute(to)}" via a navigation guard.`;
     },
-    [4 /* NAVIGATION_ABORTED */]({ from, to }) {
+    [4 /* ErrorTypes.NAVIGATION_ABORTED */]({ from, to }) {
         return `Navigation aborted from "${from.fullPath}" to "${to.fullPath}" via a navigation guard.`;
     },
-    [8 /* NAVIGATION_CANCELLED */]({ from, to }) {
+    [8 /* ErrorTypes.NAVIGATION_CANCELLED */]({ from, to }) {
         return `Navigation cancelled from "${from.fullPath}" to "${to.fullPath}" with a new navigation.`;
     },
-    [16 /* NAVIGATION_DUPLICATED */]({ from, to }) {
+    [16 /* ErrorTypes.NAVIGATION_DUPLICATED */]({ from, to }) {
         return `Avoided redundant navigation to current location: "${from.fullPath}".`;
     },
 };
@@ -843,7 +826,7 @@ function stringifyRoute(to) {
     return JSON.stringify(location, null, 2);
 }
 
-// default pattern for a param: non greedy everything but /
+// default pattern for a param: non-greedy everything but /
 const BASE_PARAM_PATTERN = '[^/]+?';
 const BASE_PATH_PARSER_OPTIONS = {
     sensitive: false,
@@ -870,23 +853,23 @@ function tokensToParser(segments, extraOptions) {
     const keys = [];
     for (const segment of segments) {
         // the root segment needs special treatment
-        const segmentScores = segment.length ? [] : [90 /* Root */];
+        const segmentScores = segment.length ? [] : [90 /* PathScore.Root */];
         // allow trailing slash
         if (options.strict && !segment.length)
             pattern += '/';
         for (let tokenIndex = 0; tokenIndex < segment.length; tokenIndex++) {
             const token = segment[tokenIndex];
-            // resets the score if we are inside a sub segment /:a-other-:b
-            let subSegmentScore = 40 /* Segment */ +
-                (options.sensitive ? 0.25 /* BonusCaseSensitive */ : 0);
-            if (token.type === 0 /* Static */) {
+            // resets the score if we are inside a sub-segment /:a-other-:b
+            let subSegmentScore = 40 /* PathScore.Segment */ +
+                (options.sensitive ? 0.25 /* PathScore.BonusCaseSensitive */ : 0);
+            if (token.type === 0 /* TokenType.Static */) {
                 // prepend the slash if we are starting a new segment
                 if (!tokenIndex)
                     pattern += '/';
                 pattern += token.value.replace(REGEX_CHARS_RE, '\\$&');
-                subSegmentScore += 40 /* Static */;
+                subSegmentScore += 40 /* PathScore.Static */;
             }
-            else if (token.type === 1 /* Param */) {
+            else if (token.type === 1 /* TokenType.Param */) {
                 const { value, repeatable, optional, regexp } = token;
                 keys.push({
                     name: value,
@@ -896,7 +879,7 @@ function tokensToParser(segments, extraOptions) {
                 const re = regexp ? regexp : BASE_PARAM_PATTERN;
                 // the user provided a custom regexp /:id(\\d+)
                 if (re !== BASE_PARAM_PATTERN) {
-                    subSegmentScore += 10 /* BonusCustomRegExp */;
+                    subSegmentScore += 10 /* PathScore.BonusCustomRegExp */;
                     // make sure the regexp is valid before using it
                     try {
                         new RegExp(`(${re})`);
@@ -919,13 +902,13 @@ function tokensToParser(segments, extraOptions) {
                 if (optional)
                     subPattern += '?';
                 pattern += subPattern;
-                subSegmentScore += 20 /* Dynamic */;
+                subSegmentScore += 20 /* PathScore.Dynamic */;
                 if (optional)
-                    subSegmentScore += -8 /* BonusOptional */;
+                    subSegmentScore += -8 /* PathScore.BonusOptional */;
                 if (repeatable)
-                    subSegmentScore += -20 /* BonusRepeatable */;
+                    subSegmentScore += -20 /* PathScore.BonusRepeatable */;
                 if (re === '.*')
-                    subSegmentScore += -50 /* BonusWildcard */;
+                    subSegmentScore += -50 /* PathScore.BonusWildcard */;
             }
             segmentScores.push(subSegmentScore);
         }
@@ -936,7 +919,7 @@ function tokensToParser(segments, extraOptions) {
     // only apply the strict bonus to the last score
     if (options.strict && options.end) {
         const i = score.length - 1;
-        score[i][score[i].length - 1] += 0.7000000000000001 /* BonusStrict */;
+        score[i][score[i].length - 1] += 0.7000000000000001 /* PathScore.BonusStrict */;
     }
     // TODO: dev only warn double trailing slash
     if (!options.strict)
@@ -968,20 +951,22 @@ function tokensToParser(segments, extraOptions) {
                 path += '/';
             avoidDuplicatedSlash = false;
             for (const token of segment) {
-                if (token.type === 0 /* Static */) {
+                if (token.type === 0 /* TokenType.Static */) {
                     path += token.value;
                 }
-                else if (token.type === 1 /* Param */) {
+                else if (token.type === 1 /* TokenType.Param */) {
                     const { value, repeatable, optional } = token;
                     const param = value in params ? params[value] : '';
-                    if (Array.isArray(param) && !repeatable)
+                    if (isArray(param) && !repeatable) {
                         throw new Error(`Provided param "${value}" is an array but it is not repeatable (* or + modifiers)`);
-                    const text = Array.isArray(param) ? param.join('/') : param;
+                    }
+                    const text = isArray(param)
+                        ? param.join('/')
+                        : param;
                     if (!text) {
                         if (optional) {
-                            // if we have more than one optional param like /:a?-static and there are more segments, we don't need to
-                            // care about the optional param
-                            if (segment.length < 2 && segments.length > 1) {
+                            // if we have more than one optional param like /:a?-static we don't need to care about the optional param
+                            if (segment.length < 2) {
                                 // remove the last slash as we could be at the end
                                 if (path.endsWith('/'))
                                     path = path.slice(0, -1);
@@ -997,7 +982,8 @@ function tokensToParser(segments, extraOptions) {
                 }
             }
         }
-        return path;
+        // avoid empty path when we have multiple optional params
+        return path || '/';
     }
     return {
         re,
@@ -1028,12 +1014,12 @@ function compareScoreArray(a, b) {
     // if the last subsegment was Static, the shorter segments should be sorted first
     // otherwise sort the longest segment first
     if (a.length < b.length) {
-        return a.length === 1 && a[0] === 40 /* Static */ + 40 /* Segment */
+        return a.length === 1 && a[0] === 40 /* PathScore.Static */ + 40 /* PathScore.Segment */
             ? -1
             : 1;
     }
     else if (a.length > b.length) {
-        return b.length === 1 && b[0] === 40 /* Static */ + 40 /* Segment */
+        return b.length === 1 && b[0] === 40 /* PathScore.Static */ + 40 /* PathScore.Segment */
             ? 1
             : -1;
     }
@@ -1084,7 +1070,7 @@ function isLastScoreNegative(score) {
 }
 
 const ROOT_TOKEN = {
-    type: 0 /* Static */,
+    type: 0 /* TokenType.Static */,
     value: '',
 };
 const VALID_PARAM_RE = /[a-zA-Z0-9_]/;
@@ -1104,7 +1090,7 @@ function tokenizePath(path) {
     function crash(message) {
         throw new Error(`ERR (${state})/"${buffer}": ${message}`);
     }
-    let state = 0 /* Static */;
+    let state = 0 /* TokenizerState.Static */;
     let previousState = state;
     const tokens = [];
     // the segment will always be valid because we get into the initial state
@@ -1126,19 +1112,19 @@ function tokenizePath(path) {
     function consumeBuffer() {
         if (!buffer)
             return;
-        if (state === 0 /* Static */) {
+        if (state === 0 /* TokenizerState.Static */) {
             segment.push({
-                type: 0 /* Static */,
+                type: 0 /* TokenType.Static */,
                 value: buffer,
             });
         }
-        else if (state === 1 /* Param */ ||
-            state === 2 /* ParamRegExp */ ||
-            state === 3 /* ParamRegExpEnd */) {
+        else if (state === 1 /* TokenizerState.Param */ ||
+            state === 2 /* TokenizerState.ParamRegExp */ ||
+            state === 3 /* TokenizerState.ParamRegExpEnd */) {
             if (segment.length > 1 && (char === '*' || char === '+'))
                 crash(`A repeatable param (${buffer}) must be alone in its segment. eg: '/:ids+.`);
             segment.push({
-                type: 1 /* Param */,
+                type: 1 /* TokenType.Param */,
                 value: buffer,
                 regexp: customRe,
                 repeatable: char === '*' || char === '+',
@@ -1155,13 +1141,13 @@ function tokenizePath(path) {
     }
     while (i < path.length) {
         char = path[i++];
-        if (char === '\\' && state !== 2 /* ParamRegExp */) {
+        if (char === '\\' && state !== 2 /* TokenizerState.ParamRegExp */) {
             previousState = state;
-            state = 4 /* EscapeNext */;
+            state = 4 /* TokenizerState.EscapeNext */;
             continue;
         }
         switch (state) {
-            case 0 /* Static */:
+            case 0 /* TokenizerState.Static */:
                 if (char === '/') {
                     if (buffer) {
                         consumeBuffer();
@@ -1170,34 +1156,35 @@ function tokenizePath(path) {
                 }
                 else if (char === ':') {
                     consumeBuffer();
-                    state = 1 /* Param */;
+                    state = 1 /* TokenizerState.Param */;
                 }
                 else {
                     addCharToBuffer();
                 }
                 break;
-            case 4 /* EscapeNext */:
+            case 4 /* TokenizerState.EscapeNext */:
                 addCharToBuffer();
                 state = previousState;
                 break;
-            case 1 /* Param */:
+            case 1 /* TokenizerState.Param */:
                 if (char === '(') {
-                    state = 2 /* ParamRegExp */;
+                    state = 2 /* TokenizerState.ParamRegExp */;
                 }
                 else if (VALID_PARAM_RE.test(char)) {
                     addCharToBuffer();
                 }
                 else {
                     consumeBuffer();
-                    state = 0 /* Static */;
+                    state = 0 /* TokenizerState.Static */;
                     // go back one character if we were not modifying
                     if (char !== '*' && char !== '?' && char !== '+')
                         i--;
                 }
                 break;
-            case 2 /* ParamRegExp */:
+            case 2 /* TokenizerState.ParamRegExp */:
                 // TODO: is it worth handling nested regexp? like :p(?:prefix_([^/]+)_suffix)
                 // it already works by escaping the closing )
+                // https://paths.esm.dev/?p=AAMeJbiAwQEcDKbAoAAkP60PG2R6QAvgNaA6AFACM2ABuQBB#
                 // is this really something people need since you can also write
                 // /prefix_:p()_suffix
                 if (char === ')') {
@@ -1205,16 +1192,16 @@ function tokenizePath(path) {
                     if (customRe[customRe.length - 1] == '\\')
                         customRe = customRe.slice(0, -1) + char;
                     else
-                        state = 3 /* ParamRegExpEnd */;
+                        state = 3 /* TokenizerState.ParamRegExpEnd */;
                 }
                 else {
                     customRe += char;
                 }
                 break;
-            case 3 /* ParamRegExpEnd */:
+            case 3 /* TokenizerState.ParamRegExpEnd */:
                 // same as finalizing a param
                 consumeBuffer();
-                state = 0 /* Static */;
+                state = 0 /* TokenizerState.Static */;
                 // go back one character if we were not modifying
                 if (char !== '*' && char !== '?' && char !== '+')
                     i--;
@@ -1225,7 +1212,7 @@ function tokenizePath(path) {
                 break;
         }
     }
-    if (state === 2 /* ParamRegExp */)
+    if (state === 2 /* TokenizerState.ParamRegExp */)
         crash(`Unfinished custom RegExp for param "${buffer}"`);
     consumeBuffer();
     finalizeSegment();
@@ -1280,6 +1267,9 @@ function createRouterMatcher(routes, globalOptions) {
         // used later on to remove by name
         const isRootAdd = !originalRecord;
         const mainNormalizedRecord = normalizeRouteRecord(record);
+        {
+            checkChildMissingNameWithEmptyPath(mainNormalizedRecord, parent);
+        }
         // we might be the child of an alias
         mainNormalizedRecord.aliasOf = originalRecord && originalRecord.record;
         const options = mergeOptions(globalOptions, record);
@@ -1323,11 +1313,11 @@ function createRouterMatcher(routes, globalOptions) {
                 throw new Error('Catch all routes ("*") must now be defined using a param with a custom regexp.\n' +
                     'See more at https://kdujs-router.web.app/guide/migration/#removed-star-or-catch-all-routes.');
             }
-            // create the object before hand so it can be passed to children
+            // create the object beforehand, so it can be passed to children
             matcher = createRouteRecordMatcher(normalizedRecord, parent, options);
             if (parent && path[0] === '/')
                 checkMissingParamsInAbsolutePath(matcher, parent);
-            // if we are an alias we must tell the original record that we exist
+            // if we are an alias we must tell the original record that we exist,
             // so we can be removed
             if (originalRecord) {
                 originalRecord.alias.push(matcher);
@@ -1345,20 +1335,27 @@ function createRouterMatcher(routes, globalOptions) {
                 if (isRootAdd && record.name && !isAliasRecord(matcher))
                     removeRoute(record.name);
             }
-            if ('children' in mainNormalizedRecord) {
+            if (mainNormalizedRecord.children) {
                 const children = mainNormalizedRecord.children;
                 for (let i = 0; i < children.length; i++) {
                     addRoute(children[i], matcher, originalRecord && originalRecord.children[i]);
                 }
             }
             // if there was no original record, then the first one was not an alias and all
-            // other alias (if any) need to reference this record when adding children
+            // other aliases (if any) need to reference this record when adding children
             originalRecord = originalRecord || matcher;
             // TODO: add normalized records for more flexibility
             // if (parent && isAliasRecord(originalRecord)) {
             //   parent.children.push(originalRecord)
             // }
-            insertMatcher(matcher);
+            // Avoid adding a record that doesn't display anything. This allows passing through records without a component to
+            // not be reached and pass through the catch all route
+            if ((matcher.record.components &&
+                Object.keys(matcher.record.components).length) ||
+                matcher.record.name ||
+                matcher.record.redirect) {
+                insertMatcher(matcher);
+            }
         }
         return originalMatcher
             ? () => {
@@ -1412,16 +1409,27 @@ function createRouterMatcher(routes, globalOptions) {
         if ('name' in location && location.name) {
             matcher = matcherMap.get(location.name);
             if (!matcher)
-                throw createRouterError(1 /* MATCHER_NOT_FOUND */, {
+                throw createRouterError(1 /* ErrorTypes.MATCHER_NOT_FOUND */, {
                     location,
                 });
+            // warn if the user is passing invalid params so they can debug it better when they get removed
+            {
+                const invalidParams = Object.keys(location.params || {}).filter(paramName => !matcher.keys.find(k => k.name === paramName));
+                if (invalidParams.length) {
+                    warn(`Discarded invalid param(s) "${invalidParams.join('", "')}" when navigating.`);
+                }
+            }
             name = matcher.record.name;
             params = assign(
             // paramsFromLocation is a new object
             paramsFromLocation(currentLocation.params, 
             // only keep params that exist in the resolved location
             // TODO: only keep optional params coming from a parent record
-            matcher.keys.filter(k => !k.optional).map(k => k.name)), location.params);
+            matcher.keys.filter(k => !k.optional).map(k => k.name)), 
+            // discard any existing params in the current location that do not exist here
+            // #1497 this ensures better active/exact matching
+            location.params &&
+                paramsFromLocation(location.params, matcher.keys.map(k => k.name)));
             // throws if cannot be stringified
             path = matcher.stringify(params);
         }
@@ -1435,7 +1443,6 @@ function createRouterMatcher(routes, globalOptions) {
             matcher = matchers.find(m => m.re.test(path));
             // matcher should have a value after the loop
             if (matcher) {
-                // TODO: dev warning of unused params if provided
                 // we know the matcher works because we tested the regexp
                 params = matcher.parse(path);
                 name = matcher.record.name;
@@ -1448,7 +1455,7 @@ function createRouterMatcher(routes, globalOptions) {
                 ? matcherMap.get(currentLocation.name)
                 : matchers.find(m => m.re.test(currentLocation.path));
             if (!matcher)
-                throw createRouterError(1 /* MATCHER_NOT_FOUND */, {
+                throw createRouterError(1 /* ErrorTypes.MATCHER_NOT_FOUND */, {
                     location,
                     currentLocation,
                 });
@@ -1506,8 +1513,8 @@ function normalizeRouteRecord(record) {
         updateGuards: new Set(),
         enterCallbacks: {},
         components: 'components' in record
-            ? record.components || {}
-            : { default: record.component },
+            ? record.components || null
+            : record.component && { default: record.component },
     };
 }
 /**
@@ -1517,7 +1524,7 @@ function normalizeRouteRecord(record) {
  */
 function normalizeRecordProps(record) {
     const propsObject = {};
-    // props does not exist on redirect records but we can set false directly
+    // props does not exist on redirect records, but we can set false directly
     const props = record.props || false;
     if ('component' in record) {
         propsObject.default = props;
@@ -1571,17 +1578,31 @@ function isSameParam(a, b) {
 function checkSameParams(a, b) {
     for (const key of a.keys) {
         if (!key.optional && !b.keys.find(isSameParam.bind(null, key)))
-            return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" should have the exact same param named "${key.name}"`);
+            return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" must have the exact same param named "${key.name}"`);
     }
     for (const key of b.keys) {
         if (!key.optional && !a.keys.find(isSameParam.bind(null, key)))
-            return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" should have the exact same param named "${key.name}"`);
+            return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" must have the exact same param named "${key.name}"`);
+    }
+}
+/**
+ * A route with a name and a child with an empty path without a name should warn when adding the route
+ *
+ * @param mainNormalizedRecord - RouteRecordNormalized
+ * @param parent - RouteRecordMatcher
+ */
+function checkChildMissingNameWithEmptyPath(mainNormalizedRecord, parent) {
+    if (parent &&
+        parent.record.name &&
+        !mainNormalizedRecord.name &&
+        !mainNormalizedRecord.path) {
+        warn(`The route named "${String(parent.record.name)}" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.`);
     }
 }
 function checkMissingParamsInAbsolutePath(record, parent) {
     for (const key of parent.keys) {
         if (!record.keys.find(isSameParam.bind(null, key)))
-            return warn(`Absolute path "${record.record.path}" should have the exact same param named "${key.name}" as its parent "${parent.record.path}".`);
+            return warn(`Absolute path "${record.record.path}" must have the exact same param named "${key.name}" as its parent "${parent.record.path}".`);
     }
 }
 function isRecordChildOf(record, parent) {
@@ -1595,7 +1616,7 @@ function isRecordChildOf(record, parent) {
  * On top of that, the RFC3986 (https://tools.ietf.org/html/rfc3986#section-2.2)
  * defines some extra characters to be encoded. Most browsers do not encode them
  * in encodeURI https://github.com/whatwg/url/issues/369, so it may be safer to
- * also encode `!'()*`. Leaving unencoded only ASCII alphanumeric(`a-zA-Z0-9`)
+ * also encode `!'()*`. Leaving un-encoded only ASCII alphanumeric(`a-zA-Z0-9`)
  * plus `-._~`. This extra safety should be applied to query by patching the
  * string returned by encodeURIComponent encodeURI also encodes `[\]^`. `\`
  * should be encoded to avoid ambiguity. Browsers (IE, FF, C) transform a `\`
@@ -1619,7 +1640,7 @@ const PLUS_RE = /\+/g; // %2B
  * application/x-www-form-urlencoded
  * (https://url.spec.whatwg.org/#urlencoded-parsing) and most browsers seems lo
  * leave the plus character as is in queries. To be more flexible, we allow the
- * plus character on the query but it can also be manually encoded by the user.
+ * plus character on the query, but it can also be manually encoded by the user.
  *
  * Resources:
  * - https://url.spec.whatwg.org/#urlencoded-parsing
@@ -1751,7 +1772,7 @@ function parseQuery(search) {
         if (key in query) {
             // an extra variable for ts types
             let currentValue = query[key];
-            if (!Array.isArray(currentValue)) {
+            if (!isArray(currentValue)) {
                 currentValue = query[key] = [currentValue];
             }
             currentValue.push(value);
@@ -1784,7 +1805,7 @@ function stringifyQuery(query) {
             continue;
         }
         // keep null values
-        const values = Array.isArray(value)
+        const values = isArray(value)
             ? value.map(v => v && encodeQueryValue(v))
             : [value && encodeQueryValue(value)];
         values.forEach(value => {
@@ -1813,7 +1834,7 @@ function normalizeQuery(query) {
     for (const key in query) {
         const value = query[key];
         if (value !== undefined) {
-            normalizedQuery[key] = Array.isArray(value)
+            normalizedQuery[key] = isArray(value)
                 ? value.map(v => (v == null ? null : '' + v))
                 : value == null
                     ? value
@@ -1823,6 +1844,43 @@ function normalizeQuery(query) {
     return normalizedQuery;
 }
 
+/**
+ * RouteRecord being rendered by the closest ancestor Router View. Used for
+ * `onBeforeRouteUpdate` and `onBeforeRouteLeave`. rvlm stands for Router View
+ * Location Matched
+ *
+ * @internal
+ */
+const matchedRouteKey = Symbol('router view location matched' );
+/**
+ * Allows overriding the router view depth to control which component in
+ * `matched` is rendered. rvd stands for Router View Depth
+ *
+ * @internal
+ */
+const viewDepthKey = Symbol('router view depth' );
+/**
+ * Allows overriding the router instance returned by `useRouter` in tests. r
+ * stands for router
+ *
+ * @internal
+ */
+const routerKey = Symbol('router' );
+/**
+ * Allows overriding the current route returned by `useRoute` in tests. rl
+ * stands for route location
+ *
+ * @internal
+ */
+const routeLocationKey = Symbol('route location' );
+/**
+ * Allows overriding the current route used by router-view. Internally this is
+ * used when the `route` prop is passed.
+ *
+ * @internal
+ */
+const routerViewLocationKey = Symbol('router view location' );
+
 /**
  * Create a list of callbacks that can be reset. Used to create before and after navigation guards list
  */
@@ -1873,7 +1931,7 @@ function onBeforeRouteLeave(leaveGuard) {
     // to avoid warning
     {}).value;
     if (!activeRecord) {
-        warn('No active route record was found when calling `onBeforeRouteLeave()`. Make sure you call this function inside of a component child of <router-view>. Maybe you called it inside of App.kdu?');
+        warn('No active route record was found when calling `onBeforeRouteLeave()`. Make sure you call this function inside a component child of <router-view>. Maybe you called it inside of App.kdu?');
         return;
     }
     registerGuard(activeRecord, 'leaveGuards', leaveGuard);
@@ -1894,7 +1952,7 @@ function onBeforeRouteUpdate(updateGuard) {
     // to avoid warning
     {}).value;
     if (!activeRecord) {
-        warn('No active route record was found when calling `onBeforeRouteUpdate()`. Make sure you call this function inside of a component child of <router-view>. Maybe you called it inside of App.kdu?');
+        warn('No active route record was found when calling `onBeforeRouteUpdate()`. Make sure you call this function inside a component child of <router-view>. Maybe you called it inside of App.kdu?');
         return;
     }
     registerGuard(activeRecord, 'updateGuards', updateGuard);
@@ -1906,16 +1964,17 @@ function guardToPromiseFn(guard, to, from, record, name) {
         (record.enterCallbacks[name] = record.enterCallbacks[name] || []);
     return () => new Promise((resolve, reject) => {
         const next = (valid) => {
-            if (valid === false)
-                reject(createRouterError(4 /* NAVIGATION_ABORTED */, {
+            if (valid === false) {
+                reject(createRouterError(4 /* ErrorTypes.NAVIGATION_ABORTED */, {
                     from,
                     to,
                 }));
+            }
             else if (valid instanceof Error) {
                 reject(valid);
             }
             else if (isRouteLocation(valid)) {
-                reject(createRouterError(2 /* NAVIGATION_GUARD_REDIRECT */, {
+                reject(createRouterError(2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */, {
                     from: to,
                     to: valid,
                 }));
@@ -1924,8 +1983,9 @@ function guardToPromiseFn(guard, to, from, record, name) {
                 if (enterCallbackArray &&
                     // since enterCallbackArray is truthy, both record and name also are
                     record.enterCallbacks[name] === enterCallbackArray &&
-                    typeof valid === 'function')
+                    typeof valid === 'function') {
                     enterCallbackArray.push(valid);
+                }
                 resolve();
             }
         };
@@ -1945,7 +2005,6 @@ function guardToPromiseFn(guard, to, from, record, name) {
                     }
                     return resolvedValue;
                 });
-                // TODO: test me!
             }
             else if (guardReturn !== undefined) {
                 // @ts-expect-error: _called is added at canOnlyBeCalledOnce
@@ -1973,6 +2032,10 @@ function canOnlyBeCalledOnce(next, to, from) {
 function extractComponentsGuards(matched, guardType, to, from) {
     const guards = [];
     for (const record of matched) {
+        if (!record.components && !record.children.length) {
+            warn(`Record with path "${record.path}" is either missing a "component(s)"` +
+                ` or "children" property.`);
+        }
         for (const name in record.components) {
             let rawComponent = record.components[name];
             {
@@ -2029,6 +2092,7 @@ function extractComponentsGuards(matched, guardType, to, from) {
                         ? resolved.default
                         : resolved;
                     // replace the function with the resolved component
+                    // cannot be null or undefined because we went into the for loop
                     record.components[name] = resolvedComponent;
                     // __kccOpts is added by kdu-class-component and contain the regular options
                     const options = resolvedComponent.__kccOpts || resolvedComponent;
@@ -2042,6 +2106,7 @@ function extractComponentsGuards(matched, guardType, to, from) {
 }
 /**
  * Allows differentiating lazy components from functional components and kdu-class-component
+ * @internal
  *
  * @param component
  */
@@ -2050,6 +2115,34 @@ function isRouteComponent(component) {
         'displayName' in component ||
         'props' in component ||
         '__kccOpts' in component);
+}
+/**
+ * Ensures a route is loaded, so it can be passed as o prop to `<RouterView>`.
+ *
+ * @param route - resolved route to load
+ */
+function loadRouteLocation(route) {
+    return route.matched.every(record => record.redirect)
+        ? Promise.reject(new Error('Cannot load a route that redirects.'))
+        : Promise.all(route.matched.map(record => record.components &&
+            Promise.all(Object.keys(record.components).reduce((promises, name) => {
+                const rawComponent = record.components[name];
+                if (typeof rawComponent === 'function' &&
+                    !('displayName' in rawComponent)) {
+                    promises.push(rawComponent().then(resolved => {
+                        if (!resolved)
+                            return Promise.reject(new Error(`Couldn't resolve component "${name}" at "${record.path}". Ensure you passed a function that returns a promise.`));
+                        const resolvedComponent = isESModule(resolved)
+                            ? resolved.default
+                            : resolved;
+                        // replace the function with the resolved component
+                        // cannot be null or undefined because we went into the for loop
+                        record.components[name] = resolvedComponent;
+                        return;
+                    }));
+                }
+                return promises;
+            }, [])))).then(() => route);
 }
 
 // TODO: we could allow currentRoute as a prop to expose `isActive` and
@@ -2115,6 +2208,9 @@ function useLink(props) {
             }, { flush: 'post' });
         }
     }
+    /**
+     * NOTE: update {@link _RouterLinkI}'s `$slots` type when updating this
+     */
     return {
         route,
         href: computed(() => route.value.href),
@@ -2164,7 +2260,7 @@ const RouterLinkImpl = /*#__PURE__*/ defineComponent({
                         : null,
                     href: link.href,
                     // this would override user added attrs but Kdu will still add
-                    // the listener so we end up triggering both
+                    // the listener, so we end up triggering both
                     onClick: link.navigate,
                     class: elClass.value,
                 }, children);
@@ -2209,7 +2305,7 @@ function includesParams(outer, inner) {
                 return false;
         }
         else {
-            if (!Array.isArray(outerValue) ||
+            if (!isArray(outerValue) ||
                 outerValue.length !== innerValue.length ||
                 innerValue.some((value, i) => value !== outerValue[i]))
                 return false;
@@ -2253,9 +2349,21 @@ const RouterViewImpl = /*#__PURE__*/ defineComponent({
         warnDeprecatedUsage();
         const injectedRoute = inject(routerViewLocationKey);
         const routeToDisplay = computed(() => props.route || injectedRoute.value);
-        const depth = inject(viewDepthKey, 0);
-        const matchedRouteRef = computed(() => routeToDisplay.value.matched[depth]);
-        provide(viewDepthKey, depth + 1);
+        const injectedDepth = inject(viewDepthKey, 0);
+        // The depth changes based on empty components option, which allows passthrough routes e.g. routes with children
+        // that are used to reuse the `path` property
+        const depth = computed(() => {
+            let initialDepth = unref(injectedDepth);
+            const { matched } = routeToDisplay.value;
+            let matchedRoute;
+            while ((matchedRoute = matched[initialDepth]) &&
+                !matchedRoute.components) {
+                initialDepth++;
+            }
+            return initialDepth;
+        });
+        const matchedRouteRef = computed(() => routeToDisplay.value.matched[depth.value]);
+        provide(viewDepthKey, computed(() => depth.value + 1));
         provide(matchedRouteKey, matchedRouteRef);
         provide(routerViewLocationKey, routeToDisplay);
         const viewRef = ref();
@@ -2267,7 +2375,7 @@ const RouterViewImpl = /*#__PURE__*/ defineComponent({
                 // this will update the instance for new instances as well as reused
                 // instances when navigating to a new route
                 to.instances[name] = instance;
-                // the component instance is reused for a different route or name so
+                // the component instance is reused for a different route or name, so
                 // we copy any saved update or leave guards. With async setup, the
                 // mounting component will mount before the matchedRoute changes,
                 // making instance === oldInstance, so we check if guards have been
@@ -2293,16 +2401,16 @@ const RouterViewImpl = /*#__PURE__*/ defineComponent({
         }, { flush: 'post' });
         return () => {
             const route = routeToDisplay.value;
-            const matchedRoute = matchedRouteRef.value;
-            const ViewComponent = matchedRoute && matchedRoute.components[props.name];
             // we need the value at the time we render because when we unmount, we
             // navigated to a different location so the value is different
             const currentName = props.name;
+            const matchedRoute = matchedRouteRef.value;
+            const ViewComponent = matchedRoute && matchedRoute.components[currentName];
             if (!ViewComponent) {
                 return normalizeSlot(slots.default, { Component: ViewComponent, route });
             }
             // props from route configuration
-            const routePropsOption = matchedRoute.props[props.name];
+            const routePropsOption = matchedRoute.props[currentName];
             const routeProps = routePropsOption
                 ? routePropsOption === true
                     ? route.params
@@ -2324,12 +2432,12 @@ const RouterViewImpl = /*#__PURE__*/ defineComponent({
                 component.ref) {
                 // TODO: can display if it's an alias, its props
                 const info = {
-                    depth,
+                    depth: depth.value,
                     name: matchedRoute.name,
                     path: matchedRoute.path,
                     meta: matchedRoute.meta,
                 };
-                const internalInstances = Array.isArray(component.ref)
+                const internalInstances = isArray(component.ref)
                     ? component.ref.map(r => r.i)
                     : [component.ref.i];
                 internalInstances.forEach(instance => {
@@ -2362,8 +2470,11 @@ const RouterView = RouterViewImpl;
 function warnDeprecatedUsage() {
     const instance = getCurrentInstance();
     const parentName = instance.parent && instance.parent.type.name;
+    const parentSubTreeType = instance.parent && instance.parent.subTree && instance.parent.subTree.type;
     if (parentName &&
-        (parentName === 'KeepAlive' || parentName.includes('Transition'))) {
+        (parentName === 'KeepAlive' || parentName.includes('Transition')) &&
+        typeof parentSubTreeType === 'object' &&
+        parentSubTreeType.name === 'RouterView') {
         const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition';
         warn(`<router-view> can no longer be used directly inside <transition> or <keep-alive>.\n` +
             `Use slot props instead:\n\n` +
@@ -2375,6 +2486,13 @@ function warnDeprecatedUsage() {
     }
 }
 
+/**
+ * Copies a route location and removes any problematic properties that cannot be shown in devtools (e.g. Kdu instances).
+ *
+ * @param routeLocation - routeLocation to format
+ * @param tooltip - optional tooltip
+ * @returns a copy of the routeLocation
+ */
 function formatRouteLocation(routeLocation, tooltip) {
     const copy = assign({}, routeLocation, {
         // remove variables that can contain kdu instances
@@ -2416,6 +2534,9 @@ function addDevtools(app, router, matcher) {
         componentStateTypes: ['Routing'],
         app,
     }, api => {
+        if (typeof api.now !== 'function') {
+            console.warn('[Kdu Router]: You seem to be using an outdated version of Kdu Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://kdujs-devtools.web.app/guide/installation.html.');
+        }
         // display state added by the router
         api.on.inspectComponent((payload, ctx) => {
             if (payload.instanceData) {
@@ -2439,7 +2560,7 @@ function addDevtools(app, router, matcher) {
                 });
             }
             // if multiple useLink are used
-            if (Array.isArray(componentInstance.__krl_devtools)) {
+            if (isArray(componentInstance.__krl_devtools)) {
                 componentInstance.__devtoolsApi = api;
                 componentInstance.__krl_devtools.forEach(devtoolsData => {
                     let backgroundColor = ORANGE_400;
@@ -2487,7 +2608,6 @@ function addDevtools(app, router, matcher) {
                     title: 'Error during Navigation',
                     subtitle: to.fullPath,
                     logType: 'error',
-                    // @ts-ignore
                     time: api.now(),
                     data: { error },
                     groupId: to.meta.__navigationId,
@@ -2509,7 +2629,6 @@ function addDevtools(app, router, matcher) {
             api.addTimelineEvent({
                 layerId: navigationsLayerId,
                 event: {
-                    // @ts-ignore
                     time: api.now(),
                     title: 'Start of navigation',
                     subtitle: to.fullPath,
@@ -2545,7 +2664,6 @@ function addDevtools(app, router, matcher) {
                 event: {
                     title: 'End of navigation',
                     subtitle: to.fullPath,
-                    // @ts-ignore
                     time: api.now(),
                     data,
                     logType: failure ? 'warning' : 'default',
@@ -2595,7 +2713,7 @@ function addDevtools(app, router, matcher) {
         api.on.getInspectorState(payload => {
             if (payload.app === app && payload.inspectorId === routerInspectorId) {
                 const routes = matcher.getRoutes();
-                const route = routes.find(route => route.record.__vd_id === payload.nodeId);
+                const route = routes.find(route => route.record.__kd_id === payload.nodeId);
                 if (route) {
                     payload.state = {
                         options: formatRouteRecordMatcherForStateInspector(route),
@@ -2659,6 +2777,13 @@ function formatRouteRecordMatcherForStateInspector(route) {
             value: route.alias.map(alias => alias.record.path),
         });
     }
+    if (Object.keys(route.record.meta).length) {
+        fields.push({
+            editable: false,
+            key: 'meta',
+            value: route.record.meta,
+        });
+    }
     fields.push({
         key: 'score',
         editable: false,
@@ -2701,21 +2826,21 @@ function formatRouteRecordForInspector(route) {
             backgroundColor: ORANGE_400,
         });
     }
-    if (route.__vd_match) {
+    if (route.__kd_match) {
         tags.push({
             label: 'matches',
             textColor: 0,
             backgroundColor: PINK_500,
         });
     }
-    if (route.__vd_exactActive) {
+    if (route.__kd_exactActive) {
         tags.push({
             label: 'exact',
             textColor: 0,
             backgroundColor: LIME_500,
         });
     }
-    if (route.__vd_active) {
+    if (route.__kd_active) {
         tags.push({
             label: 'active',
             textColor: 0,
@@ -2724,18 +2849,19 @@ function formatRouteRecordForInspector(route) {
     }
     if (record.redirect) {
         tags.push({
-            label: 'redirect: ' +
-                (typeof record.redirect === 'string' ? record.redirect : 'Object'),
+            label: typeof record.redirect === 'string'
+                ? `redirect: ${record.redirect}`
+                : 'redirects',
             textColor: 0xffffff,
             backgroundColor: DARK,
         });
     }
     // add an id to be able to select it. Using the `path` is not possible because
     // empty path children would collide with their parents
-    let id = record.__vd_id;
+    let id = record.__kd_id;
     if (id == null) {
         id = String(routeRecordId++);
-        record.__vd_id = id;
+        record.__kd_id = id;
     }
     return {
         id,
@@ -2752,19 +2878,19 @@ function markRouteRecordActive(route, currentRoute) {
     // reset the matching state
     const isExactActive = currentRoute.matched.length &&
         isSameRouteRecord(currentRoute.matched[currentRoute.matched.length - 1], route.record);
-    route.__vd_exactActive = route.__vd_active = isExactActive;
+    route.__kd_exactActive = route.__kd_active = isExactActive;
     if (!isExactActive) {
-        route.__vd_active = currentRoute.matched.some(match => isSameRouteRecord(match, route.record));
+        route.__kd_active = currentRoute.matched.some(match => isSameRouteRecord(match, route.record));
     }
     route.children.forEach(childRoute => markRouteRecordActive(childRoute, currentRoute));
 }
 function resetMatchStateOnRouteRecord(route) {
-    route.__vd_match = false;
+    route.__kd_match = false;
     route.children.forEach(resetMatchStateOnRouteRecord);
 }
 function isRouteMatching(route, filter) {
     const found = String(route.re).match(EXTRACT_REGEXP_RE);
-    route.__vd_match = false;
+    route.__kd_match = false;
     if (!found || found.length < 3) {
         return false;
     }
@@ -2775,7 +2901,7 @@ function isRouteMatching(route, filter) {
         route.children.forEach(child => isRouteMatching(child, filter));
         // exception case: `/`
         if (route.record.path !== '/' || filter === '/') {
-            route.__vd_match = route.re.test(filter);
+            route.__kd_match = route.re.test(filter);
             return true;
         }
         // hide the / route
@@ -2888,9 +3014,7 @@ function createRouter(options) {
                 !('name' in rawLocation) &&
                 // @ts-expect-error: the type is never
                 Object.keys(rawLocation.params).length) {
-                warn(`Path "${
-                // @ts-expect-error: the type is never
-                rawLocation.path}" was passed with params but they will be ignored. Use a named route alongside params instead.`);
+                warn(`Path "${rawLocation.path}" was passed with params but they will be ignored. Use a named route alongside params instead.`);
             }
             matcherLocation = assign({}, rawLocation, {
                 path: parseURL(parseQuery$1, rawLocation.path, currentLocation.path).path,
@@ -2904,9 +3028,9 @@ function createRouter(options) {
                     delete targetParams[key];
                 }
             }
-            // pass encoded values to the matcher so it can produce encoded path and fullPath
+            // pass encoded values to the matcher, so it can produce encoded path and fullPath
             matcherLocation = assign({}, rawLocation, {
-                params: encodeParams(rawLocation.params),
+                params: encodeParams(targetParams),
             });
             // current location params are decoded, we need to encode them in case the
             // matcher merges the params
@@ -2917,7 +3041,7 @@ function createRouter(options) {
         if (hash && !hash.startsWith('#')) {
             warn(`A \`hash\` should always start with the character "#". Replace "${hash}" with "#${hash}".`);
         }
-        // decoding them) the matcher might have merged current location params so
+        // the matcher might have merged current location params, so
         // we need to run the decoding again
         matchedRoute.params = normalizeParams(decodeParams(matchedRoute.params));
         const fullPath = stringifyURL(stringifyQuery$1, assign({}, rawLocation, {
@@ -2958,7 +3082,7 @@ function createRouter(options) {
     }
     function checkCanceledNavigation(to, from) {
         if (pendingLocation !== to) {
-            return createRouterError(8 /* NAVIGATION_CANCELLED */, {
+            return createRouterError(8 /* ErrorTypes.NAVIGATION_CANCELLED */, {
                 from,
                 to,
             });
@@ -2993,7 +3117,8 @@ function createRouter(options) {
             return assign({
                 query: to.query,
                 hash: to.hash,
-                params: to.params,
+                // avoid transferring params if the redirect has a path
+                params: 'path' in newTargetLocation ? {} : to.params,
             }, newTargetLocation);
         }
     }
@@ -3007,7 +3132,9 @@ function createRouter(options) {
         const shouldRedirect = handleRedirectRecord(targetLocation);
         if (shouldRedirect)
             return pushWithRedirect(assign(locationAsObject(shouldRedirect), {
-                state: data,
+                state: typeof shouldRedirect === 'object'
+                    ? assign({}, data, shouldRedirect.state)
+                    : data,
                 force,
                 replace,
             }), 
@@ -3018,7 +3145,7 @@ function createRouter(options) {
         toLocation.redirectedFrom = redirectedFrom;
         let failure;
         if (!force && isSameRouteLocation(stringifyQuery$1, from, targetLocation)) {
-            failure = createRouterError(16 /* NAVIGATION_DUPLICATED */, { to: toLocation, from });
+            failure = createRouterError(16 /* ErrorTypes.NAVIGATION_DUPLICATED */, { to: toLocation, from });
             // trigger scroll to allow scrolling to the same anchor
             handleScroll(from, from, 
             // this is a push, the only way for it to be triggered from a
@@ -3031,14 +3158,14 @@ function createRouter(options) {
         return (failure ? Promise.resolve(failure) : navigate(toLocation, from))
             .catch((error) => isNavigationFailure(error)
             ? // navigation redirects still mark the router as ready
-                isNavigationFailure(error, 2 /* NAVIGATION_GUARD_REDIRECT */)
+                isNavigationFailure(error, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)
                     ? error
                     : markAsReady(error) // also returns the error
             : // reject any unknown error
                 triggerError(error, toLocation, from))
             .then((failure) => {
             if (failure) {
-                if (isNavigationFailure(failure, 2 /* NAVIGATION_GUARD_REDIRECT */)) {
+                if (isNavigationFailure(failure, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)) {
                     if (// we are redirecting to the same location we were already at
                         isSameRouteLocation(stringifyQuery$1, resolve(failure.to), toLocation) &&
                         // and we have done it a couple of times
@@ -3047,16 +3174,20 @@ function createRouter(options) {
                         (redirectedFrom._count = redirectedFrom._count
                             ? // @ts-expect-error
                                 redirectedFrom._count + 1
-                            : 1) > 10) {
-                        warn(`Detected an infinite redirection in a navigation guard when going from "${from.fullPath}" to "${toLocation.fullPath}". Aborting to avoid a Stack Overflow. This will break in production if not fixed.`);
+                            : 1) > 30) {
+                        warn(`Detected a possibly infinite redirection in a navigation guard when going from "${from.fullPath}" to "${toLocation.fullPath}". Aborting to avoid a Stack Overflow.\n Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.`);
                         return Promise.reject(new Error('Infinite redirect in navigation guard'));
                     }
                     return pushWithRedirect(
                     // keep options
-                    assign(locationAsObject(failure.to), {
-                        state: data,
-                        force,
+                    assign({
+                        // preserve an existing replacement but allow the redirect to override it
                         replace,
+                    }, locationAsObject(failure.to), {
+                        state: typeof failure.to === 'object'
+                            ? assign({}, data, failure.to.state)
+                            : data,
+                        force,
                     }), 
                     // preserve the original redirectedFrom if any
                     redirectedFrom || toLocation);
@@ -3079,6 +3210,13 @@ function createRouter(options) {
         const error = checkCanceledNavigation(to, from);
         return error ? Promise.reject(error) : Promise.resolve();
     }
+    function runWithContext(fn) {
+        const app = installedApps.values().next().value;
+        // support Kdu < 3.3
+        return app && typeof app.runWithContext === 'function'
+            ? app.runWithContext(fn)
+            : fn();
+    }
     // TODO: refactor the whole before guards by internally using router.beforeEach
     function navigate(to, from) {
         let guards;
@@ -3122,7 +3260,7 @@ function createRouter(options) {
             for (const record of to.matched) {
                 // do not trigger beforeEnter on reused views
                 if (record.beforeEnter && !from.matched.includes(record)) {
-                    if (Array.isArray(record.beforeEnter)) {
+                    if (isArray(record.beforeEnter)) {
                         for (const beforeEnter of record.beforeEnter)
                             guards.push(guardToPromiseFn(beforeEnter, to, from));
                     }
@@ -3155,15 +3293,16 @@ function createRouter(options) {
             return runGuardQueue(guards);
         })
             // catch any navigation canceled
-            .catch(err => isNavigationFailure(err, 8 /* NAVIGATION_CANCELLED */)
+            .catch(err => isNavigationFailure(err, 8 /* ErrorTypes.NAVIGATION_CANCELLED */)
             ? err
             : Promise.reject(err)));
     }
     function triggerAfterEach(to, from, failure) {
         // navigation is confirmed, call afterGuards
         // TODO: wrap with error handlers
-        for (const guard of afterGuards.list())
-            guard(to, from, failure);
+        for (const guard of afterGuards.list()) {
+            runWithContext(() => guard(to, from, failure));
+        }
     }
     /**
      * - Cleans up any navigation guards
@@ -3202,6 +3341,8 @@ function createRouter(options) {
         if (removeHistoryListener)
             return;
         removeHistoryListener = routerHistory.listen((to, _from, info) => {
+            if (!router.listening)
+                return;
             // cannot be a redirect route because it was in history
             const toLocation = resolve(to);
             // due to dynamic routing, and to hash history with manual navigation
@@ -3220,15 +3361,15 @@ function createRouter(options) {
             }
             navigate(toLocation, from)
                 .catch((error) => {
-                if (isNavigationFailure(error, 4 /* NAVIGATION_ABORTED */ | 8 /* NAVIGATION_CANCELLED */)) {
+                if (isNavigationFailure(error, 4 /* ErrorTypes.NAVIGATION_ABORTED */ | 8 /* ErrorTypes.NAVIGATION_CANCELLED */)) {
                     return error;
                 }
-                if (isNavigationFailure(error, 2 /* NAVIGATION_GUARD_REDIRECT */)) {
+                if (isNavigationFailure(error, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)) {
                     // Here we could call if (info.delta) routerHistory.go(-info.delta,
                     // false) but this is bug prone as we have no way to wait the
                     // navigation to be finished before calling pushWithRedirect. Using
-                    // a setTimeout of 16ms seems to work but there is not guarantee for
-                    // it to work on every browser. So Instead we do not restore the
+                    // a setTimeout of 16ms seems to work but there is no guarantee for
+                    // it to work on every browser. So instead we do not restore the
                     // history entry and trigger a new navigation as requested by the
                     // navigation guard.
                     // the error is already handled by router.push we just want to avoid
@@ -3238,10 +3379,10 @@ function createRouter(options) {
                     )
                         .then(failure => {
                         // manual change in hash history #916 ending up in the URL not
-                        // changing but it was changed by the manual url change, so we
+                        // changing, but it was changed by the manual url change, so we
                         // need to manually change it ourselves
-                        if (isNavigationFailure(failure, 4 /* NAVIGATION_ABORTED */ |
-                            16 /* NAVIGATION_DUPLICATED */) &&
+                        if (isNavigationFailure(failure, 4 /* ErrorTypes.NAVIGATION_ABORTED */ |
+                            16 /* ErrorTypes.NAVIGATION_DUPLICATED */) &&
                             !info.delta &&
                             info.type === NavigationType.pop) {
                             routerHistory.go(-1, false);
@@ -3252,8 +3393,9 @@ function createRouter(options) {
                     return Promise.reject();
                 }
                 // do not restore history on unknown direction
-                if (info.delta)
+                if (info.delta) {
                     routerHistory.go(-info.delta, false);
+                }
                 // unrecognized error, transfer to the global handler
                 return triggerError(error, toLocation, from);
             })
@@ -3265,11 +3407,14 @@ function createRouter(options) {
                         toLocation, from, false);
                 // revert the navigation
                 if (failure) {
-                    if (info.delta) {
+                    if (info.delta &&
+                        // a new navigation has been triggered, so we do not want to revert, that will change the current history
+                        // entry while a different route is displayed
+                        !isNavigationFailure(failure, 8 /* ErrorTypes.NAVIGATION_CANCELLED */)) {
                         routerHistory.go(-info.delta, false);
                     }
                     else if (info.type === NavigationType.pop &&
-                        isNavigationFailure(failure, 4 /* NAVIGATION_ABORTED */ | 16 /* NAVIGATION_DUPLICATED */)) {
+                        isNavigationFailure(failure, 4 /* ErrorTypes.NAVIGATION_ABORTED */ | 16 /* ErrorTypes.NAVIGATION_DUPLICATED */)) {
                         // manual change in hash history #916
                         // it's like a push but lacks the information of the direction
                         routerHistory.go(-1, false);
@@ -3345,6 +3490,7 @@ function createRouter(options) {
     const installedApps = new Set();
     const router = {
         currentRoute,
+        listening: true,
         addRoute,
         removeRoute,
         hasRoute,
@@ -3408,16 +3554,18 @@ function createRouter(options) {
                 }
                 unmountApp();
             };
+            // TODO: this probably needs to be updated so it can be used by kdu-termui
             if (isBrowser) {
                 addDevtools(app, router, matcher);
             }
         },
     };
+    // TODO: type this as NavigationGuardReturn or similar instead of any
+    function runGuardQueue(guards) {
+        return guards.reduce((promise, guard) => promise.then(() => runWithContext(guard)), Promise.resolve());
+    }
     return router;
 }
-function runGuardQueue(guards) {
-    return guards.reduce((promise, guard) => promise.then(() => guard()), Promise.resolve());
-}
 function extractChangingRecords(to, from) {
     const leavingRecords = [];
     const updatingRecords = [];
@@ -3457,4 +3605,4 @@ function useRoute() {
     return inject(routeLocationKey);
 }
 
-export { NavigationFailureType, RouterLink, RouterView, START_LOCATION_NORMALIZED as START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey };
+export { NavigationFailureType, RouterLink, RouterView, START_LOCATION_NORMALIZED as START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey };