An advanced Svelte 3 router.
Alright there are so many router libraries and components for Svelte. So why would you use Routve?
Simply, Routve is super simple - easy to use, always up-to-date, maintained, stable and advanced. It has already used in production, and some development projects. Routve supports advanced and complex features such as route managing, navigation guards, page load handling, automatic links, hashbang, nested routing, and most importantly code splitting (aka. dynamic component import).
When we first created Routve, there was no properly enough advanced router library which especially supports code splitting and nested routing. We believed we can create only one truly advanced enough router library for Svelte. Now, we are introducing you: Routve with further features.
Routve supports these features for now:
- Very tiny ~ only few light dependencies
Path routing (aka. URI) ~ like
/register, without hash - ideal for SPA and SSR -
Hashbang ~ like
index.html#!/register, ideal for static SPA
Nested routing ~ add children routes/pages and just add router like
Base path ~ you can define base path like;
/panelthen routing is gonna be like
- Customizable config per router ~ customize your each router component
Automatic links on
<a href="">attribute ~ thanks to
page.js(no more need for extra component import, for example:
Regex support ~ thanks to
Router events ~ such as
afterRouteEnter- useful for navigation guards
- isPageLoading event ~ a boolean reactive variable - which allows you to determine is the page still loading?
- Custom chunk support ~ Routve uses chunk component for each route to ensure stable, safe and providing additional advanced features - you can either give by each route or generally to all routes
Import component as you want ~ Routve supports many component import styles! - such as
() => import("/TestPage.svelte")(aka. dynamic importing, lazy loading),
import("/TestPage.svelte")static promise importing or
component: TestPageComponentstatic/preloaded component passing
Named params ~ give your route which param would you like to, such as
Route params ~ get param by the path, for example;
postIDis now our route param, Routve will add this param to page component (
export let postID;)
Wildcards ~ thanks to
Query strings ~ query strings like;
/some-route?example=123- thanks to
HTML5 history mode ~ which is typically
path routing, ideal for SPA and SSR - thanks to
Error 404 handling ~ Routve can handle all 404 error page requests if there is no matching route and if
*is given as path
Programmatic navigation ~ just import
routemethod and call it
- Route names ~ you can define specific route names or get route names
There are also upcoming features:
npm install routve
Always use yarn to avoid conflicting .lock file issues.
Firstly, install all packages with
Secondly, run which example would you like to run: (
yarn dev:<example> see
yarn run or
Merge requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE file for details.