npm i defi-router
A bundle (downloadable version) lives at gh-pages branch
The library turns on two-way data binding between properties and parts of URL.
// location.hash is used there;objecta = 'foo';objectb = 'bar';objectc = 'baz';// makes location.hash to be #!/foo/bar/baz/
If you need to use History API instead of hash, pass
"history" as the second argument.
CJS module import:
const defiRouter = ;;
How does a "traditional" routing works? A developer defines a rule (route) and defines a function which will be called when current path fits the given rule.
Let's say you need to synchronize
"x" with the first part of
"y" with the second.
Now when you type...
objectx = 'foo';objecty = 'bar';
location.hash is automatically changed to
And vice versa. When the URL is changed manually or via back and forward buttons, the properties will be changed automatically.
locationhash = '#!/baz/qux/';// ... after a momentconsole; // ‘baz’, ‘qux’
As usually you can listen property changes with defi.on method.
An asterisk syntax
You can pass a string which contain asterisks to
defiRouter if you don't need to synchronize some part of the path with a property.
If the hash looks like
object.x = "foo" and
object.y = "baz".
This feature is useful in cases when two or more modules control different parts of the path.
Two important things to know
1. If a property has truthy value then URL will be changed immediately after
objectx = 'foo';;
2. If a property gets falsy value then all next listed properties will get
null as new values.
;objecty = null; // makes object.z and object.u to be null as well
The idea is to get actual state of URL. It could be weird to get
"z" with value
"foo" in case of non-existing bound part of URL.
HTML5 History API
The plugin supports HTML5 History as well. To initialize it you need to pass an optional argument
"history" value to the
defiRouter function (by default