svelte-page
Nested routing with
page.js
for svelte
How to use
- Build a object with all your routes:
'/': home '/other': other '/things': component: things data: foo: 'A custom property' '/things/:thing*': thing '/things/:thing/subthing/': subthing
- Pass it to the
<Router />
Every page may receive the following properties:
- Any property passed to the page programatically with the
Router.go(path, { ...props })
or in theroutes.js
definition params
- An object representing all the parameters from the URLpage
child
- The nested route component that should be rendered;props
- The props that should be passed to the nested component
- For nested routes, use the
<NestedRoute>
Here is my sub-page:
<NestedRoute />
can fire events to allow communication between parent and child pages.
Available events:
action
response
event
Example:
Props
routes
- The routes object(default: undefined)
strict
- If false, match trailling slash(default: true)
hashbang
- Add#!
before urls(default: true)
Dynamic:
context
- Thepage.js
context objectpath
- The current router path
Slots
Both <Router>
and <NestedRoute>
have the optional default
slot which is only rendered when the current route isn't associated with any component.
404 - Route not found Nested route not found
Events
Component events
notFound
When a route isn't found, both the <Router>
and <NestedRoute>
fire a notFound
event.
change
When a route change occurs, the <Router/>
component fires a change
event:
This event is also fired at the root
component with the name of router:change
:
{ thisroot }
The <Router />
adds itself to the root
component as a router
property, so it's also possible to get the context by observing its lifecycle:
<!-- Some other component down the hierarchy -->
Static Methods
<!-- Some other component down the hierarchy -->
Example
App.html
AboutPersonTemplate.html
For more examples, please check the example/src/routes.js
file.