Kendo UI 单页面应用(二) Router 类

Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route 也支持通过代码在应用的不同状态之间切换。

Router 根路径回调函数

<script> 
    var router = new kendo.Router(); 
 
    router.route("/", function() { 
        console.log("/ url was loaded"); 
    }); 
 
    $(function() { 
        router.start(); 
    }); 
</script>

缺省情况下,如果 URL fragment 为空,将使用缺省的“/”的根路径,此时对于的回调函数被调用,不管初始 URL 是什么,这个初始化的回调函数总会调用。如果使用 IE,按 F12 可以打开 Developer Window,选择 Console 可以看到 console.log 的打印信息。

参数

Router 支持 bound parameters, optional segments, 和 route globbing,类似于绑定参数,可选参数,匹配符匹配参数等。例如:绑定参数

<script> 
    var router = new kendo.Router(); 
 
    router.route("/items/:category/:id", function(category, id) { 
        console.log(category, "item with", id, " was requested"); 
    }); 
 
    $(function() { 
        router.start(); 
 
        // ... 
 
        router.navigate("/items/books/59"); 
    }); 
</script>

当运行这个页面时,注意地址栏中的地址为:

<http://localhost:53223/Index.html#/items/books/59 –> #/items/books/59>

可选参数

如果 URL 的部分参数为可选的,此时 Route 的规则为使用”()”,将可选参数放在括号内。

<script> 
    var router = new kendo.Router(); 
 
    router.route("/items(/:category)(/:id)", function(category, id) { 
        console.log(category, "item with", id, " was requested"); 
    }); 
 
    $(function() { 
        router.start(); 
 
        // ... 
        router.navigate("/items/books/59"); 
 
        // ... 
        router.navigate("/items"); 
 
        // ... 
        router.navigate("/items/books"); 
    }); 
</script>

使用×通配符匹配参数

<script> 
    var router = new kendo.Router(); 
 
    router.route("/items/*suffix", function(suffix) { 
        console.log(suffix); 
    }); 
 
    $(function() { 
        router.start(); 
 
        // ... 
        router.navigate("/items/books/59"); 
 
        // ... 
        router.navigate("/items/accessories"); 
 
        // ... 
        router.navigate("/items/books"); 
    }); 
</script>

页面切换

navigation 方法可以用来切换应用,对应的路径的回调方法被调用, navigation 方法修改 URL 的 fragment 部分(#后面部分)。比如:

<a href="#/foo">Foo</a> 
 
<script> 
    var router = new kendo.Router(); 
 
    router.route("/foo", function() { 
        console.log("welcome to foo"); 
    }); 
 
    $(function() { 
        router.start(); 
        router.navigate("/foo"); 
    }); 
</script>

这个例子,将在地址栏显示 http://xxx/index.html#/foo。如果对应的路径不存在,Router 类触发 routeMissing 事件,并把 URL 作为参数传入。

<script> 
var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } }); 
 
$(function() { 
    router.start(); 
    router.navigate("/foo"); 
}); 
</script>

你可以通过 change 事件来截获这种页面之间的切换,然后调用 preventDefault 阻止页面切换。

<script> 
var router = new kendo.Router({ 
    change: function(e) { 
        console.log(url); 
        e.preventDefault(); 
    } 
}); 
 
$(function() { 
    router.start(); 
    router.navigate("/foo"); 
}); 
</script>

发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Kendo 单页面应用(一)概述知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。