Kendo UI开发课程(24): 单页面应用(二) Router 类
Kendo UI开发教程(24): 单页面应用(二) Router 类
Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route通过Url的片段功能（#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route也支持通过代码在应用的不同状态之间切换。
Router根路径回调函数
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>
|