Kendo UI 單頁(yè)面應(yīng)用(二) Router 類

單頁(yè)面應(yīng)用(二) Router 類

Route 類負(fù)責(zé)跟蹤應(yīng)用的當(dāng)前狀態(tài)和支持在應(yīng)用的不同狀態(tài)之間切換。Route 通過(guò) Url 的片段功能（#url)和流量器的瀏覽歷史功能融合在一起。從而可以支持把應(yīng)用的某個(gè)狀態(tài)作為書(shū)簽添加到瀏覽器中。Route 也支持通過(guò)代碼在應(yīng)用的不同狀態(tài)之間切換。

Router 根路徑回調(diào)函數(shù)

<script>
    var router = new kendo.Router();

    router.route("/", function() {
        console.log("/ url was loaded");
    });

    $(function() {
        router.start();
    });
</script>

缺省情況下，如果 URL fragment 為空，將使用缺省的“/”的根路徑，此時(shí)對(duì)于的回調(diào)函數(shù)被調(diào)用，不管初始 URL 是什么，這個(gè)初始化的回調(diào)函數(shù)總會(huì)調(diào)用。如果使用 IE，按 F12 可以打開(kāi) Developer Window，選擇 Console 可以看到 console.log 的打印信息。

參數(shù)

Router 支持 bound parameters, optional segments, 和 route globbing，類似于綁定參數(shù)，可選參數(shù)，匹配符匹配參數(shù)等。例如：綁定參數(shù)

<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>

當(dāng)運(yùn)行這個(gè)頁(yè)面時(shí)，注意地址欄中的地址為：

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

可選參數(shù)

如果 URL 的部分參數(shù)為可選的，此時(shí) Route 的規(guī)則為使用”()”,將可選參數(shù)放在括號(hào)內(nèi)。

<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>

使用×通配符匹配參數(shù)

<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>

頁(yè)面切換

navigation 方法可以用來(lái)切換應(yīng)用，對(duì)應(yīng)的路徑的回調(diào)方法被調(diào)用, 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>

這個(gè)例子，將在地址欄顯示 http://xxx/index.html#/foo。如果對(duì)應(yīng)的路徑不存在，Router 類觸發(fā) routeMissing 事件，并把 URL 作為參數(shù)傳入。

<script>
var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } });

$(function() {
    router.start();
    router.navigate("/foo");
});
</script>

你可以通過(guò) change 事件來(lái)截獲這種頁(yè)面之間的切換，然后調(diào)用 preventDefault 阻止頁(yè)面切換。

<script>
var router = new kendo.Router({
    change: function(e) {
        console.log(url);
        e.preventDefault();
    }
});

$(function() {
    router.start();
    router.navigate("/foo");
});
</script>