Skip to content

Instantly share code, notes, and snippets.

@timhall

timhall/App.html

Last active November 27, 2017 20:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timhall/e9a5bd43c541cedf6c39e27b437fe2cf to your computer and use it in GitHub Desktop.
Save timhall/e9a5bd43c541cedf6c39e27b437fe2cf to your computer and use it in GitHub Desktop.
Download ZIP
svelte-router
Raw
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>
Raw
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>
Raw
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>
Raw
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) {
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment