Returns

Use

Background information

To support the browser’s back button and bookmarking in a JavaScript
application, most applications use
the window.location.hash. By
changing the hash (via a link or JavaScript),
one is able to add to the browser’s history
without changing the page.

This provides the basics needed to
create history enabled single-page apps. However,
route addresses several other needs such as:

Pretty urls.

Keeping routes independent of application code.

Listening to specific parts of the history changing.

Setup / Teardown of widgets.

How it works

can-route is a map that represents the
window.location.hash as an
object. For example, if the hash looks like:

#!type=videos&id=5

the data in can-route looks like:

{ type: 'videos', id: 5 }

can-route keeps the state of the hash in-sync with the data contained within it.

Encoded /

If the change in your route data includes a /, the / will be encoded into %2F.
You will see this result in the URL and location.hash.

route.data.type = 'image/bar';
// OR
route.attr('type', 'image/bar');

The URL will look like this:

https://example.com/#!type=image%2Fbar

The location hash will look like this:

#!type=image%2Fbar

Creating a route

Use route(url, defaults) to create a
route. A route is a mapping from a url to
an object (that is the route’s state).
In order to map to a specific properties in the url,
prepend a colon to the name of the property like:

route("#!content/{type}");

If no routes are added, or no route is matched,
can-route’s data is updated with the deparamed
hash.

location.hash = "#!type=videos";
// route -> {type : "videos"}

Once routes are added and the hash changes,
can-route looks for matching routes and uses them
to update can-route’s data.