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>

 

最新文章

  1. quartz_jobs.xml标准配置
  2. 关于edoc程序tomcat post提交中文乱码解决办法
  3. php添加数据到xml文件的例子
  4. JS 中对象的简单创建和继承
  5. js继承实例
  6. FOOD
  7. make 2&gt;&amp;1 | tee log.txt之小析
  8. Linux文件权限rwx简单了解
  9. 2018 ACM-ICPC Asia Beijing Regional Contest （部分题解）
  10. 二进制学习 wsample01a.exe
  11. HackerRake平台说明和介绍
  12. 6、Docker Image
  13. iOS：通信录（完成）（18-01-18更）
  14. TED_Topic1：Why we need to rethink capitalism
  15. 使用 AWK 來做垂直数字相加
  16. 【51nod-1432】独木舟
  17. 怎样才能使用ChipScope 加入被优化掉的信号
  18. Python代码这样写更优雅（转）
  19. linux下各种形式的shell加法操作总结
  20. FusionCharts:tooltip分行显示

热门文章

  1. TCP/IP之DNS域名解析系统
  2. python中enumerate 函数
  3. 乐观锁&amp;悲观锁
  4. Struts2、spring2、hibernate3在SSH中各起什么作用
  5. python idle 错误 subprocess didn&amp;#39;t make connection
  6. Android的BUG（四） - Android app的卡死问题
  7. linux路由表配置
  8. cocos2d-x中文显示：加字库
  9. BZOJ 3359: [Usaco2004 Jan]矩形( dp )
  10. api 跳转规则