A lightweight client-side router with guards for the Svelte framework.
npm install svelte-lightweight-router
npm install svelte-lightweight-router
`
Setup
To setup the lightweight router, you first need to define a array of routes, containing all pages of your application:
`javascript
const routes = [
{path: "", component: HomePageComponent},
{path: "login", component: LoginPageComponent},
{path: "user", component: UserPageComponent}
];
`
Each route consists of:
- path - URL path to the page (e.g. "home", "/user/details", etc.)
- component - reference to the Svelte component that gets displayed
- guards - array of function references to guard the access to a route _(optional)_
Then you need to provide the routes to the lightweight router:
`javascript
import { defineRoutes } from "svelte-lightweight-router";
...
defineRoutes(routes);
`
Last, import the Router and display it in your document:
`html
`
Navigating between pages
To navigate beetween pages with the lightweight router, either call the navigate function from script:
`javascript
import { navigate } from "svelte-lightweight-router";
navigate("home");
`
Or use the href attribute on a anchor element:
`html
Home
`
Guarding routes
To guard a route and restrict access to a page (e.g. Login, Authentication etc.), provide a array of guards to your routes:
`javascript
routes = [
{path: "user", component: UserPageComponent, guards:[authenticate]},
{path: "admin", component: AdminPageComponent, guards: [authenticate, authorize]}
]
`
The route accepts a array of function references for guarding the route. Each function must return true if the route can be accessed, or a path as a string to reroute the user to a different page, if the guard has denied access to the route:
`javascript
function authenticate(path) {
return isLoggedIn ? true : "login";
}
`
Error Route
To reroute the user to a specific page for a route that is not defined, pass a optional route to the defineRoutes function.
`javascript
const notFoundRoute = {path: "error", component: NotFoundPageComponent};
defineRoutes(routes, notFoundRoute);
``