Kendo UI 單頁面應用(二) Router 類

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>