Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Routve logo

An advanced Svelte 3 router.

Maintained Travis CI Build Status Version License Chat



Routve is an advanced non-official Svelte 3 router like vue-router. Under the hood it uses page.js.

Why Routve?

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 /login /register, without hash - ideal for SPA and SSR - default
  • Hashbang ~ like index.html#!/login index.html#!/register, ideal for static SPA
  • Nested routing ~ add children routes/pages and just add router like <Router>
  • Base path ~ you can define base path like; /panel then routing is gonna be like /panel/login
  • 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: <Link>)
  • Regex support ~ thanks to page.js
  • Router events ~ such as beforeEnterRoute, 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: TestPageComponent static/preloaded component passing
  • Named params ~ give your route which param would you like to, such as pageType: "trash"
  • Route params ~ get param by the path, for example; /post/:postID - postID is now our route param, Routve will add this param to page component (export let postID;)
  • Wildcards ~ thanks to page.js
  • Query strings ~ query strings like; /some-route?example=123 - thanks to page.js
  • HTML5 history mode ~ which is typically path routing, ideal for SPA and SSR - thanks to page.js
  • 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 route method and call it route("/login")
  • Route names ~ you can define specific route names or get route names

There are also upcoming features:

  • SSR support
  • Sapper support


npm install routve


Always use yarn to avoid conflicting .lock file issues.

Firstly, install all packages with yarn:


Secondly, run which example would you like to run: (yarn dev:<example> see yarn run or package.json #scripts)

yarn dev


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.