https://github.com/routve/routve
📍 Routve is an advanced Svelte 3 router.
https://github.com/routve/routve
advanced hashbang navigation-guards pagejs router router-libraries spa svelte
Last synced: 9 months ago
JSON representation
📍 Routve is an advanced Svelte 3 router.
- Host: GitHub
- URL: https://github.com/routve/routve
- Owner: routve
- License: mit
- Archived: true
- Created: 2020-05-08T20:19:57.000Z (about 6 years ago)
- Default Branch: dev
- Last Pushed: 2022-12-11T23:38:05.000Z (over 3 years ago)
- Last Synced: 2025-09-22T05:53:12.337Z (9 months ago)
- Topics: advanced, hashbang, navigation-guards, pagejs, router, router-libraries, spa, svelte
- Language: Svelte
- Homepage: https://routve.github.io
- Size: 1.99 MB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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 ``
- 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 `` attribute ~ thanks to `page.js` (no more need for extra component import, for example: ``)
- 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
```bash
npm install routve
```
# Development
Always use yarn to avoid conflicting .lock file issues.
Firstly, install all packages with `yarn`:
```bash
yarn
```
Secondly, run which example would you like to run: (`yarn dev:` see `yarn run` or [`package.json`](package.json) #scripts)
```bash
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](LICENSE) file for details.