Kendo UI开发教程(24): 单页面应用(二) Router 类
Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route也支持通过代码在应用的不同状态之间切换。
1
<
script
>
2
var router = new kendo.Router();
3
4
router.route("/", function() {
5
console.log("/ url was loaded");
6
});
7
8
$(function() {
9
router.start();
10
});
11
</
script
>
缺省情况下,如果URL fragment为空,将使用缺省的“/”的根路径,此时对于的回调函数被调用,不管初始URL是什么,这个初始化的回调函数总会调用。
如果使用IE,按F12可以打开Developer Window,选择Console 可以看到console.log 的打印信息。
Router 支持bound parameters, optional segments, 和 route globbing,类似于绑定参数,可选参数,匹配符匹配参数等。
例如:绑定参数
1
<
script
>
2
var router = new kendo.Router();
3
4
router.route("/items/:category/:id", function(category, id) {
5
console.log(category, "item with", id, " was requested");
6
});
7
8
$(function() {
9
router.start();
10
11
// ...
12
13
router.navigate("/items/books/59");
14
});
15
</
script
>
当运行这个页面时,注意地址栏中的地址为:
http://localhost:53223/Index.html#/items/books/59 –> #/items/books/59
可选参数
如果URL的部分参数为可选的,此时Route的规则为使用”()”,将可选参数放在括号内。
1
<
script
>
2
var router = new kendo.Router();
3
4
router.route("/items(/:category)(/:id)", function(category, id) {
5
console.log(category, "item with", id, " was requested");
6
});
7
8
$(function() {
9
router.start();
10
11
// ...
12
router.navigate("/items/books/59");
13
14
// ...
15
router.navigate("/items");
16
17
// ...
18
router.navigate("/items/books");
19
});
20
</
script
>
使用×通配符匹配参数
1
<
script
>
2
var router = new kendo.Router();
3
4
router.route("/items/*suffix", function(suffix) {
5
console.log(suffix);
6
});
7
8
$(function() {
9
router.start();
10
11
// ...
12
router.navigate("/items/books/59");
13
14
// ...
15
router.navigate("/items/accessories");
16
17
// ...
18
router.navigate("/items/books");
19
});
20
</
script
>
navigation方法可以用来切换应用,对应的路径的回调方法被调用,navigation方法修改URL的fragment部分(#后面部分)。
比如:
1
<
a
href
=
"#/foo"
>Foo</
a
>
2
3
<
script
>
4
var router = new kendo.Router();
5
6
router.route("/foo", function() {
7
console.log("welcome to foo");
8
});
9
10
$(function() {
11
router.start();
12
router.navigate("/foo");
13
});
14
</
script
>
这个例子,将在地址栏显示 http://xxx/index.html#/foo。
如果对应的路径不存在,Router类触发routeMissing事件,并把URL作为参数传入。
1
<
script
>
2
var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } });
3
4
$(function() {
5
router.start();
6
router.navigate("/foo");
7
});
8
</
script
>
你可以通过change事件来截获这种页面之间的切换,然后调用preventDefault阻止页面切换。
1
<
script
>
2
var router = new kendo.Router({
3
change: function(e) {
4
console.log(url);
5
e.preventDefault();
6
}
7
});
8
9
$(function() {
10
router.start();
11
router.navigate("/foo");
12
});
13
</
script
>