History API based Routing library for building One Page Applications with sifrr.
APIs | caniuse | polyfills |
---|---|---|
History API | https://caniuse.com/#feat=history | https://github.com/browserstate/history.js |
Note sifrr-route
only works inside another wrapper sifrr element, since it uses prop path
- Copy contents of
dist/sifrr.route.js
toelements/sifrr/route.js
folder in your sifrr app. And useSifrr.Dom.load('sifrr-route')
to load sifrr-route. - Or you can directly import in html:
<!-- Using ES6 modules and NPM -->
import '@sifrr/route';
<!-- OR ES6 modules and using CDN -->
<script
src="https://unpkg.com/@sifrr/route@{version}/dist/sifrr.route.min.js"
charset="utf-8"
type="module"
></script>
<!-- OR without module -->
<script
src="https://unpkg.com/@sifrr/route@{version}/dist/sifrr.route.min.js"
charset="utf-8"
></script>
- You also need to take care in your server configuration that correct html file is served for all sifrr-routes.
Good way can be to serve index.html
to all routes and define all routes in this file.
Add sifrr-route tag in your html, this will only be shown when window.location.pathname
is same as path
prop unless it has target
attribute and it is not equal to _self
or link is of some other domain.
<sifrr-route :path="/some-path">
<!-- Contents -->
</sifrr-route>
Note that when sifrr-route
is loaded, clicking on a link a
won't reload the page, but only show sifrr-routes with matching pathname. If you want the page to reload add target='_top'
to a
tag.
-
You can use
sifrr-route
inside anothersifrr-route
. -
path prop can be a sifrr-dom binding as well, and it should work without any problems
-
you can also use regex in
path
but it will be shown only if it is exact match of pathname, eg:/(.*)/abcd
will match/qwert/abcd
but not/qwert/abcd/efgh
-
URL Query string is not matched
-
You can also you special syntax if you want to parse pathname and use it:
-
:alphanumeric
matches anything without/
as alphanumeric variable. -
*
matches anything without/
as star variable. -
**
matches everything eg./:x/*/**/mnop/*/:k
will match/new/def/ghi/klm/mnop/sdf/klm
and parse it as
{ '*': [ "def", "sdf" ], '**': [ "ghi/klm" ], x: "new", k: "klm" }
and make
sifrr-route
tag with:path="/:x/*/**/mnop/*/:k"
's state equal to this parsed data -
- Sifrr-routes matching
window.location.pathname
will haveactive
class - Sifrr-routes not matching
window.location.pathname
will not haveactive
class. You can add animations etc, based on this.
Is equal to data parsed using special syntax as mentioned above
Clicking on
<a href="/" title="Home">HOME</a>
Will change document's title to Home
(title attribute) and shows sifrr-routes which are active.
If you want to do any complex operation, you can either add a onStateChange()
method on sifrr-route
or use a click event listener on links.
Any child elements with [data-sifrr-route-state="true"]
will get passed state from parent sifrr-route.
eg.
<sifrr-route id="complex" path="/test/:id" data-sifrr-elements="sifrr-test">
Route state check
<sifrr-test data-sifrr-route-state="true"></sifrr-test>
</sifrr-route>
When window location path is /test/1
, sifrr-route's state will be { id: 1 }
and sifrr-test's state will be { route: { id: 1 } }
sifrr-route {
}
sifrr-route.active {
opacity: 0;
animation: anim 0.3s ease forwards;
}
@keyframes anim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
using sifrr-animate
// all sifrr-routes
Sifrr.Dom.Event.addListener('activate', 'sifrr-route', (e, t) => {
Sifrr.animate({
target: t,
to: {
style: {
opacity: ['0', '1'],
transform: ['scale3d(0.5,0.5,0.5)', 'scale3d(1,1,1)']
}
}
});
});
// particular sifrr-route
Sifrr.Dom.Event.addListener('activate', document.$('sifrr-route#animated'), (e, t) => {
Sifrr.animate({
target: t,
to: {
style: {
opacity: ['0', '1'],
transform: ['scale3d(0.5,0.5,0.5)', 'scale3d(1,1,1)']
}
}
});
});