Heim > Web-Frontend > js-Tutorial > riot.js lernt [9] Routing

riot.js lernt [9] Routing

黄舟
Freigeben: 2017-01-16 16:23:35
Original
1644 Leute haben es durchsucht

Das Routing-System von Riot basiert auf hashChanges [Anchor Point Change]. Es gibt zwei Möglichkeiten, Ankerpunktänderungen zu überwachen:

riot.route und riot.route.exec

Die Unterschiede zwischen den beiden sind wie folgt:

1 lädt, wenn die Seite danach einmal ausgeführt wird, und zwar nur einmal

2 Nachdem die Routenseite geladen wurde, wird sie nicht automatisch ausgeführt

3 >
Nachdem sich der Ankerpunkt geändert hat, ist die Verwendung dieselbe, aber der Zeitpunkt der Ausführung ist unterschiedlich. Nehmen wir exec als Beispiel.

Die Standardwerte lauten wie folgt:

[code]// .../index.html#123/da宗熊
riot.route.exec(function(id, name){
    // id = 123, name = da宗熊
    console.log(id, name);
});
Nach dem Login kopieren
Der Callback-Parameter der Route wird standardmäßig durch „/“ getrennt.


Riot bietet auch eine Methode zum Überschreiben des Standardwerts einer Route:

[code]// 定义路由新的取值方式: #!/user/home?id=123&name=xxx
riot.route.parser(function(path){
    // path 是 hash【除去#的那部分】 => !/user/home?id=123&name=xxx
    var raw = path.slice(1).split("?");
    var uri = raw[0],
        qs = raw[1],
        params = {};

    // 有搜索参数的话
    if(qs){
        qs.replace(/([^=&]*)=([^&])*/g, function(str, key, value){
            params[key] = value;
            return str;
        });
    };
    // 给下面riot.route.exec()和riot.route()的 第1 和 第2 个参数
    return [uri, params];
});
Nach dem Login kopieren
Neue Routenüberwachung kann wie folgt verwendet werden:

[code]// 假如链接如下: #!/user/home?id=123&name=xxx
riot.route.exec(function(uri, qs){
    // uri = /user/home
    // qs = {id: 123, name: "xxx"}
});
Nach dem Login kopieren
Obwohl der Verlauf ist nicht verwendet Die API repariert den Link, aber der Ankerpunkt reicht aus.

Das Obige ist der Inhalt des Lernens [9] Routing mit riot.js. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage