svelte-router

App.html

<Route path="/" exact>
  Home
</Route>
<Route path="/a">
  A
  <Route path="/a/nested">Nested</Route>
</Route>
<Route path="/b/:id">
  B {{$router.params.id}}
</Route>

<script>
  import { Route } from 'svelte-router';
  
  export default {
    components: { Route }
  }
</script>

index.html

<div id="app"></div>

<script>
  import { Store } from 'svelte/store';
  import { Router } from 'svelte-router';
  import App from './App.html'
  
  const store = new Store();
  const router = new Router();
  router.connect(store);
  
  const app = new App({
    target: document.getElementById('app'),
    store
  });
</script>

Route.html

{{#if active}}
  <slot />
{{/if}}

<script>
  export default {
    data: () => ({ path: '', exact: false })
    computed: {
      active: (path, exact, router, $router) => {
        if (router) return router.matches(path, exact);
        if ($router) return $router.matches(path, exact);
        return false;
      }
    }
  }
</script>

svelte-router.js

export { default as Route } from './Route.html';

export class Router {
  connect(store) {
    // store.set({ router }) on each URL change
  }
    
  matches(path, exact = false) {
   
  }
}