Simple Router for Svelte 3
npm install svero
svero (Svelte Router): A simple router for Svelte 3.
svero is intented to be used in SPA (Single Page Applications) making usage of pushState and History API. We're assuming that you already know how to configure your front-end server (being it dev or production) to serve all path requests to index.html.
If you're not familiar with the terms SPA, pushState or History API, you should probably be reading these first:
http://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash
https://css-tricks.com/using-the-html5-history-api/
https://diveinto.html5doctor.com/history.html
https://developer.mozilla.org/pt-BR/docs/Web/API/History
Since it's exported in CommonJS format, you should be using it with a module bundler such as Rollup or Webpack.
You can install svero via npm:
``
npm install --save svero
The usage is super simple:
`html
`
The wildcard simply works as a fallback. If a route fails to meet any other path, it then loads the path with the . If there is no wildcard route and the route did not meet any other path, nothing is loaded.
Your custom props can be passed by putting your component in the Route slot (Employees example above).
Paths with parameters (:param) are passed to components via props: router.params.
> Parameters like *param will capture the rest of segments. You can access them as router.params._ like other params.
A component loaded by receives a property with route details:
`html`
Additional properties are passed to the mounted component, e.g.
`html`
Also, you can pass an object:
`html`
> Route props are omitted, but all remaining ones are passed to Test.
Routes can also render any given markup when they're active, e.g.
`html`
It works!
> You can access router within renders by declaring let:router on or components (see below).
If you're building an SPA or simply want to leverage on hash-based routing for certain components try the following:
` Info: {JSON.stringify(router.params)}html`
Standard anchors and components will work as usual:
`html`
View README.md
Declaring a component will serve as fallback when location.hash is empty.
You can render svero components inside anything, e.g.
`html`
Properties determine how routing will match and render routes:
- Use the nofallback prop for telling to disable the _fallback_ mechanism by defaultfallback
- Any route using the prop will catch unmatched routes or potential look-up errorsexact
- Use the prop to skip this route from render just in case it does not matches
- A without path will render only if is active!
> Note that all paths MUST begin from the root as /sub and /sub/nested in the example.
Sometimes you just want a route to send user to another place. You can use the redirect attribute for that.
A redirect should always be a string with a path. It uses the same pattern as path attribute. For a redirect to run, there must be a Route with the equivalent path.
`html`
If you need to meet a condition in order to run a route, you can use the condition attribute. Conditions can also be used with redirect for graceful route fallback.
A condition should be either boolean or a function returning boolean. There is no support for asynchronous conditions at the moment (so keep it simple).
`html`
Think of it as a simpler middleware. A condition will run before the route loads your component, so there is no wasteful component mounting, and no screen blinking the unwanted view.
There is also an useful component that overrides elements:
`html`
Hello!
The difference between and is that it uses pushState whenever possible, with fallback to behavior. This means that when you use , svero can update the view based on your URL trigger, without reloading the entire page.
> Given href values will be normalized (on-click) if they don't start with a slash, e.g. when location.pathname === '/foo' then #bar would become /foo#bar as result.
In some cases you want to navigate to routes programatically instead of letting user click on links. For this scenario we have navigateto() which takes a route as parameter and navigates imediatelly to said route.
navigateTo() receives the same treatment as : It will always try to use pushState for better performance, fallbacking to a full page redirect if it isn't supported.
Usage:
`html``