GitHub
TwitterrouteUrl(hashes)
Returns a url using route.url.
routeUrl( hashes... [,merge] )
Calls route.url with hashes as its data argument and an
optional merge. routeUrl can be used in conjunction with other helpers.
This can be used on its own to create <a> hrefs like:
<mock-url></mock-url>
<cooking-example></cooking-example>
<script type="module">
import {Component} from "can";
import "//unpkg.com/mock-url@5";
Component.extend({
tag: "cooking-example",
view: `<a href='{{ routeUrl(page="recipe" id=5) }}'>{{recipe.name}}</a>`,
ViewModel: {
recipe: {
default() {
return {name: "apple pie"};
}
}
}
});
</script>
This produces (with no pretty routing rules):
<a href='#!&page=recipe&id=5'>{{recipe.name}}</a>
Parameters
- hashes
{Hash Expression|undefined}:A hash expression like
page='edit' recipeId=id. Passingundefinedhas the effect of writing out the current url. - merge
{Boolean}:Pass
trueto create a url that mergeshashesinto the current can-route properties.In the following example notice that
#!&page=recipeis in hash before clicking the link. After the link is#!&page=recipe&id=5:<mock-url></mock-url> <cooking-example></cooking-example> <script type="module"> import {Component, route} from "can"; import "//unpkg.com/mock-url@5"; Component.extend({ tag: "cooking-example", view: `<a href='{{ routeUrl(id=5, true) }}'>Apple Pie</a>`, }); route.data.set("page", "recipe"); route.start(); </script>
Returns
{String}:
Returns the result of calling route.url.
Use
The following example uses routeUrl and routeCurrent(hash) to
create links that update can-route’s page attribute:
<my-nav></my-nav>
<script type="module">
import {Component, route} from "can";
Component.extend({
tag: "my-nav",
view: `
<a {{^ routeCurrent(page='home') }}
href="{{ routeUrl(page='home') }}"
{{/ routeCurrent }}
>home</a>
<a {{^ routeCurrent(page='restaurants') }}
href="{{ routeUrl(page='restaurants') }}"
{{/ routeCurrent }}
>restaurants</a>
{{# eq(routeData.page, 'home') }}
<h1>Home page</h1>
{{ else }}
<h1>Restaurants page</h1>
{{/ eq }}
`,
ViewModel: {
routeData: {
default() {
route.register("{page}", {page: "home"});
route.start();
return route.data;
}
}
}
});
</script>
It also writes out the current url like:
{{ routeUrl(undefined, true) }}
This calls route.url({}, true) which has the effect of writing out
the current url.