* New feature: Route redirection.

* Router View component now supports the exact matching for active class. * Bugfix: Navigation to root named route.

Author: David Horak

changelog.md

@@ -1,8 +1,14 @@
 # Svelte Router changelog
 
+## 1.0.7
+
+* New feature: Route redirection.
+* Router View component now supports the exact matching for active class.
+* Bugfix: Navigation to root named route.
+
 ## 1.0.6
 
-* Bugfix: router properly handles basename passed as router config.
+* Bugfix: Router properly handles basename passed as router config.
 
 ## 1.0.5
 

component/link.svelte

@@ -5,12 +5,13 @@
  */
 
  import tc from '@spaceavocado/type-check';
- import {router, urlMatch, trimPrefix} from '@spaceavocado/svelte-router';
+ import {router, urlMatch, urlPrefix, trimPrefix} from '@spaceavocado/svelte-router';
  import {onMount, onDestroy, createEventDispatcher} from 'svelte';
 
  // Props
  export let to;
  export let replace = false;
+ export let exact = false;
  export let cls = '';
  export let activeClass = null;
 
@@ -39,7 +40,10 @@
  onMount(() => {
  setCssClass(false);
  navigationChangedListener = $router.onNavigationChanged((fromRoute, toRoute) => {
- setCssClass(urlMatch(toRoute.fullPath, matchUrl));
+ setCssClass(exact
+ ? urlMatch(toRoute.fullPath, matchUrl)
+ : urlPrefix(toRoute.fullPath, matchUrl)
+ );
  });
  });
  onDestroy(() => {

docs/history.js.html

@@ -27,7 +27,7 @@
 
 <nav >
 
- <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-svelte-router.Router.html">Router</a><ul class='methods'><li data-type='method'><a href="module-svelte-router.Router.html#back">back</a></li><li data-type='method'><a href="module-svelte-router.Router.html#forward">forward</a></li><li data-type='method'><a href="module-svelte-router.Router.html#go">go</a></li><li data-type='method'><a href="module-svelte-router.Router.html#navigationGuard">navigationGuard</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onError">onError</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onNavigationChanged">onNavigationChanged</a></li><li data-type='method'><a href="module-svelte-router.Router.html#push">push</a></li><li data-type='method'><a href="module-svelte-router.Router.html#replace">replace</a></li><li data-type='method'><a href="module-svelte-router.Router.html#routeURL">routeURL</a></li><li data-type='method'><a href="module-svelte-router.Router.html#start">start</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-svelte-router.html">svelte-router</a></li><li><a href="module-svelte-router_history.html">svelte-router/history</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_history.html#~history">history</a></li></ul></li><li><a href="module-svelte-router_location.html">svelte-router/location</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_location.html#.createLocation">createLocation</a></li></ul></li><li><a href="module-svelte-router_route.html">svelte-router/route</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_route.html#.cloneRoute">cloneRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRoute">createRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteConfig">createRouteConfig</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteRecord">createRouteRecord</a></li></ul></li><li><a href="module-svelte-router_utils.html">svelte-router/utils</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_utils.html#.deepClone">deepClone</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.fullURL">fullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasPrefix">hasPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasSuffix">hasSuffix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.historyFullURL">historyFullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.joinPath">joinPath</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.parseURL">parseURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlMatch">urlMatch</a></li></ul></li></ul>
+ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-svelte-router.Router.html">Router</a><ul class='methods'><li data-type='method'><a href="module-svelte-router.Router.html#_resolveRedirect">_resolveRedirect</a></li><li data-type='method'><a href="module-svelte-router.Router.html#back">back</a></li><li data-type='method'><a href="module-svelte-router.Router.html#forward">forward</a></li><li data-type='method'><a href="module-svelte-router.Router.html#go">go</a></li><li data-type='method'><a href="module-svelte-router.Router.html#navigationGuard">navigationGuard</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onError">onError</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onNavigationChanged">onNavigationChanged</a></li><li data-type='method'><a href="module-svelte-router.Router.html#push">push</a></li><li data-type='method'><a href="module-svelte-router.Router.html#replace">replace</a></li><li data-type='method'><a href="module-svelte-router.Router.html#routeURL">routeURL</a></li><li data-type='method'><a href="module-svelte-router.Router.html#start">start</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-svelte-router.html">svelte-router</a></li><li><a href="module-svelte-router_history.html">svelte-router/history</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_history.html#~history">history</a></li></ul></li><li><a href="module-svelte-router_location.html">svelte-router/location</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_location.html#.createLocation">createLocation</a></li></ul></li><li><a href="module-svelte-router_route.html">svelte-router/route</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_route.html#.cloneRoute">cloneRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRoute">createRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteConfig">createRouteConfig</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteRecord">createRouteRecord</a></li></ul></li><li><a href="module-svelte-router_utils.html">svelte-router/utils</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_utils.html#.deepClone">deepClone</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.fullURL">fullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasPrefix">hasPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasSuffix">hasSuffix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.historyFullURL">historyFullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.joinPath">joinPath</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.parseURL">parseURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.trimPrefix">trimPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlMatch">urlMatch</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlPrefix">urlPrefix</a></li></ul></li></ul>
 </nav>
 
 <div id="main">
@@ -130,7 +130,7 @@ <h1 class="page-title">history.js</h1>
 <br class="clear">
 
 <footer>
- Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Aug 09 2019 23:09:15 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Aug 11 2019 11:47:39 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/index.html

@@ -27,7 +27,7 @@
 
 <nav >
 
- <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-svelte-router.Router.html">Router</a><ul class='methods'><li data-type='method'><a href="module-svelte-router.Router.html#back">back</a></li><li data-type='method'><a href="module-svelte-router.Router.html#forward">forward</a></li><li data-type='method'><a href="module-svelte-router.Router.html#go">go</a></li><li data-type='method'><a href="module-svelte-router.Router.html#navigationGuard">navigationGuard</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onError">onError</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onNavigationChanged">onNavigationChanged</a></li><li data-type='method'><a href="module-svelte-router.Router.html#push">push</a></li><li data-type='method'><a href="module-svelte-router.Router.html#replace">replace</a></li><li data-type='method'><a href="module-svelte-router.Router.html#routeURL">routeURL</a></li><li data-type='method'><a href="module-svelte-router.Router.html#start">start</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-svelte-router.html">svelte-router</a></li><li><a href="module-svelte-router_history.html">svelte-router/history</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_history.html#~history">history</a></li></ul></li><li><a href="module-svelte-router_location.html">svelte-router/location</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_location.html#.createLocation">createLocation</a></li></ul></li><li><a href="module-svelte-router_route.html">svelte-router/route</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_route.html#.cloneRoute">cloneRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRoute">createRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteConfig">createRouteConfig</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteRecord">createRouteRecord</a></li></ul></li><li><a href="module-svelte-router_utils.html">svelte-router/utils</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_utils.html#.deepClone">deepClone</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.fullURL">fullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasPrefix">hasPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasSuffix">hasSuffix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.historyFullURL">historyFullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.joinPath">joinPath</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.parseURL">parseURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlMatch">urlMatch</a></li></ul></li></ul>
+ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-svelte-router.Router.html">Router</a><ul class='methods'><li data-type='method'><a href="module-svelte-router.Router.html#_resolveRedirect">_resolveRedirect</a></li><li data-type='method'><a href="module-svelte-router.Router.html#back">back</a></li><li data-type='method'><a href="module-svelte-router.Router.html#forward">forward</a></li><li data-type='method'><a href="module-svelte-router.Router.html#go">go</a></li><li data-type='method'><a href="module-svelte-router.Router.html#navigationGuard">navigationGuard</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onError">onError</a></li><li data-type='method'><a href="module-svelte-router.Router.html#onNavigationChanged">onNavigationChanged</a></li><li data-type='method'><a href="module-svelte-router.Router.html#push">push</a></li><li data-type='method'><a href="module-svelte-router.Router.html#replace">replace</a></li><li data-type='method'><a href="module-svelte-router.Router.html#routeURL">routeURL</a></li><li data-type='method'><a href="module-svelte-router.Router.html#start">start</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-svelte-router.html">svelte-router</a></li><li><a href="module-svelte-router_history.html">svelte-router/history</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_history.html#~history">history</a></li></ul></li><li><a href="module-svelte-router_location.html">svelte-router/location</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_location.html#.createLocation">createLocation</a></li></ul></li><li><a href="module-svelte-router_route.html">svelte-router/route</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_route.html#.cloneRoute">cloneRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRoute">createRoute</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteConfig">createRouteConfig</a></li><li data-type='method'><a href="module-svelte-router_route.html#.createRouteRecord">createRouteRecord</a></li></ul></li><li><a href="module-svelte-router_utils.html">svelte-router/utils</a><ul class='methods'><li data-type='method'><a href="module-svelte-router_utils.html#.deepClone">deepClone</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.fullURL">fullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasPrefix">hasPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.hasSuffix">hasSuffix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.historyFullURL">historyFullURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.joinPath">joinPath</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.parseURL">parseURL</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.trimPrefix">trimPrefix</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlMatch">urlMatch</a></li><li data-type='method'><a href="module-svelte-router_utils.html#.urlPrefix">urlPrefix</a></li></ul></li></ul>
 </nav>
 
 <div id="main">
@@ -80,6 +80,7 @@ <h3> </h3>
 <li><a href="#setup-the-router">Setup the Router</a></li>
 <li><a href="#route-configuration">Route Configuration</a></li>
 <li><a href="#dynamic-route-configuration">Dynamic Route Configuration</a></li>
+<li><a href="#route-redirection">Route Redirection</a></li>
 <li><a href="#passing-props-to-route-components">Passing Props to Route Components</a><ul>
 <li><a href="#automatically-pass-route-params-as-component-props">Automatically Pass Route Params as Component Props</a></li>
 <li><a href="#pass-custom-object-as-component-props">Pass Custom Object as Component Props</a></li>
@@ -173,6 +174,7 @@ <h2>Installation via NPM or Yarn</h2><pre class="prettyprint source lang-sh"><co
  }
  ]
 }</code></pre><h2>Boilerplate Project Template</h2><p>For a quick start, you can use <a href="https://github.com/spaceavocado/svelte-router-template">svelte-router-template</a> - Boilerplate template project for spaceavocado/svelte-router.</p>
+<p><a href="https://spaceavocado.github.io/svelte-router-template/">Live Preview</a>.</p>
 <h2>Essentials</h2><p>Note: All code below uses ES2015+.</p>
 <h3>Setup the Router</h3><p>All we need to do is map our components to the routes and add root RouterView component, here's a basic example of app component uses as the main <a href="#https://svelte.dev">Svelte</a> component.</p>
 <p>index.js:</p>
@@ -225,6 +227,11 @@ <h3>Route Configuration</h3><p>A route can be configure with these properties:</
 <td style="text-align:left">string</td>
 </tr>
 <tr>
+<td style="text-align:left">redirect</td>
+<td style="text-align:left">Redirection to different route, or to external site. Please see <a href="#route-redirection">Route Redirection</a> for advanced usage.</td>
+<td style="text-align:left">boolean, object, function</td>
+</tr>
+<tr>
 <td style="text-align:left">name</td>
 <td style="text-align:left">The name of the current route, optional.</td>
 <td style="text-align:left">string</td>
@@ -297,6 +304,41 @@ <h3>Route Configuration</h3><p>A route can be configure with these properties:</
 <li>Special case is <code>path: '*'</code> which means any URL, this route should be the last route in your routes definition.</li>
 <li>All resolved dynamic parameters are accessible on the resolved route object.</li>
 </ul>
+<h3>Route Redirection</h3><p>To redirect a route, you can configure it like so:</p>
+<pre class="prettyprint source lang-javascript"><code>// Redirect from /a to /b
+{ 
+ path: '/a',
+ redirect: '/b',
+}
+
+// External site redirect
+// Must start with 'http' or 'https'
+{ 
+ path: '/a',
+ redirect: 'https://github.com/spaceavocado/svelte-router',
+}
+
+// Redirect to named route
+{ 
+ path: '/a',
+ redirect: {
+ name: 'ROUTE_NAME',
+ },
+}
+
+// Dynamic redirecting
+// &quot;to&quot; is Route Object
+// Return value must be URL or a Route.
+{ 
+ path: '/a',
+ redirect: (to) => {
+ return {
+ name: 'ROUTE_NAME',
+ }
+ },
+}</code></pre><blockquote>
+<p>Please see <a href="#route-object">Route Object</a> for more details.</p>
+</blockquote>
 <h3>Passing Props to Route Components</h3><p>By default, props are not automatically passed to the route component, this could be change to:</p>
 <h4>Automatically Pass Route Params as Component Props</h4><p>All route dynamic props are auto-passed to the component.</p>
 <pre class="prettyprint source lang-javascript"><code>// app.svelte
@@ -400,6 +442,11 @@ <h3>Router Link Component</h3><pre class="prettyprint source lang-html"><code>&l
 <td style="text-align:left">boolean</td>
 </tr>
 <tr>
+<td style="text-align:left">exact</td>
+<td style="text-align:left">The default active class matching behavior is inclusive match, i.e. it matches if the URL starts with link url. In the exact mode, the url must be be the same (excluding query param and hash param). Defaults to false.</td>
+<td style="text-align:left">boolean</td>
+</tr>
+<tr>
 <td style="text-align:left">cls</td>
 <td style="text-align:left">Link base class name, defaults to ''.</td>
 <td style="text-align:left">string</td>
@@ -879,7 +926,7 @@ <h3>Pull Request Process</h3><ol>
 </blockquote>
 </li>
 </ol>
-<h2>License</h2><p>Svelte Router is released under the MIT license. See <a href="https://github.com/spaceavocado/svelte-router/blob/master/LICENSE.txt">LICENSE.txt</a></p></article>
+<h2>License</h2><p>Svelte Router is released under the MIT license. See <a href="https://github.com/spaceavocado/svelte-router/blob/master/LICENSE.txt">LICENSE.txt</a>.</p></article>
  </section>
 
 
@@ -894,7 +941,7 @@ <h2>License</h2><p>Svelte Router is released under the MIT license. See <a href=
 <br class="clear">
 
 <footer>
- Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Aug 09 2019 23:09:15 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Aug 11 2019 11:47:40 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>