data
An observable key-value object used to cross bind to the url observable urlData. Set it to cross-bind a top level state object (Application ViewModel) to can-route.
Object
If route.data
is set to a can-reflected observable object of
key-value pairs, once start is called, changes in route.data
's
properties will update the hash and vice-versa. route.data
defaults to a can-define/map/map.
<mock-url></mock-url>
<script type="module">
import {DefineMap, route} from "can";
import "//unpkg.com/mock-url@^5.0.0/mock-url.mjs";
route.data = new DefineMap( {page: ""} );
route.register( "{page}" );
route.start();
location.hash = "#!example";
setTimeout(()=> {
console.log( route.data ); //-> {page: "example"}
}, 100);
</script>
HTMLElement
If route.data
is set to an element, its
observable can-view-model will be used as the observable connected
to the browser's hash.
Deprecated
Assigning an HTMLElement to route.data
has been deprecated in favor of setting it to an observable. If you have any further questions please refer to the Routing guide.
For in-depth examples see the the Routing guide.
Use
route.data
defaults to can-define/map/map, but route.data
can be set to any observable. The following uses can-observe:
import {DefineMap, route, observe} from "can/everything";
route.data = new observe();
route.register( "{page}", { page: "home" } );
route.start();
console.log( route.data.page ) //-> "home"