https://github.com/PaulMaly/svelte-page-router

https://github.com/PaulMaly/svelte-page-router

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/PaulMaly/svelte-page-router
• Owner: PaulMaly
• Created: 2019-07-23T09:37:10.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T13:45:05.000Z (over 2 years ago)
• Last Synced: 2024-05-05T16:44:14.838Z (about 2 months ago)
• Language: JavaScript
• Size: 105 KB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-svelte-resources - `svelte-page-router` - (components and libraries / routers)

README

        
# svelte-page-router

Simple wrapper based on pagejs to make DX similar to config-based router. Play well with [Svelte 3](https://v3.svelte.technology).

## Usage

Install with npm or yarn:

```bash

npm install --save svelte-page-router

```

Then import router to your `main.js` file:

```javascript

import Router from 'svelte-page-router';

import App from './App.svelte';

const options = {

	click: true,

	popstate: true,

	dispatch: true,

	hashbang: false,

};

const router = new Router({

	routes: [{

		path: '/static',

		component: import('./pages/Static')

	},{

		path: '/dynamic/:id/:type?',

		component: ctx => import('~/pages/Dynamic') // for lazy-loaded routes

	},{

		path: '/secure',

		component: import('~/pages/Secure'),

		before(ctx, next) {

			(/* check authorization */) ? 

				next() : 

				router.redirect('/static');

		}				

	}, {

		path: '*',

		component: import('~/pages/NotFound'),

	}],

	hooks: [

		(ctx, next) => {

			/* simple hooks to modify context for any route */

			next();

		}

	],

	...options

});

// simple integrate with Svelte

const app = new App({

	target: document.body,

	props: { component: null }

});

router.enter((ctx, next) => {

	app.$set({ ...ctx });

	tick().then(next);

});

router.exit((ctx, next) => {

	app.$set({ component: null });

	tick().then(next);

});

router.start();

```

Switch pages in `App.svelte`:

```html

	import Loading from './Loading.svelte';

	export let component = null,

		pathname = '',

		path = '',

		hash = '',

		params = {},

		query = {},

		state = {};

```

Use `preload` function to preload some data before page component will be rendered:

```html



{#each items as item}

	
{item.title}

{/each}



	export async function preload(ctx) {

		const res = fetch(`/items/${ctx.params.id}?type=${ctx.params.type}&page=${ctx.query.page}`);

		const items = res.json();

		return { items };

	}

	export let items = [];

```

## Context

Is a context object from [pagejs](http://visionmedia.github.io/page.js/#context) with additional property `component` which is a Svelte component associated with the current route.

## Methods

```javascript

router.base(); // base path

router.strict(true); // strict matching

router.before((ctx, next) => { /* ... */ }); // guard before any route

router.after((ctx, next) => { /* ... */ }); // guard after any route

router.enter((ctx, next) => { /* ... */ }); // guard entring any route

router.exit((ctx, next) => { /* ... */ }); // guard exiting any route

router.start(); // start listening

router.stop(); // stop listening

router.redirect('/some'); // redirects

router.back(); // history back

```

## License

MIT