routve

An advanced Svelte 3 router.

---

About

Introduction:

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.

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

Install

npm install routve

Development

Always use yarn to avoid conflicting .lock file issues.

Firstly, install all packages with yarn:

yarn

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

yarn dev

Contributing

Merge requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.