riot.js learning [9] routing

Riot's routing system is based on hashChange's [Anchor Point Change]. There are two ways to monitor anchor point changes:

riot.route and riot.route.exec

The differences between the two are as follows:

1. exec only loads when the page After that, execute it once, and only once

2. After the route page is loaded, it will not be executed automatically

3. The route will only be executed

twice after the anchor point changes The usage is the same, but the timing of execution is different. Let's take exec as an example

The default value is as follows:

[code]// .../index.html#123/da宗熊
riot.route.exec(function(id, name){
    // id = 123, name = da宗熊
    console.log(id, name);
});

The callback parameter of the route is separated by "/" by default.

Riot also provides a method to overwrite the default value of the 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];
});

New route monitoring can be used like this:

[code]// 假如链接如下: #!/user/home?id=123&name=xxx
riot.route.exec(function(uri, qs){
    // uri = /user/home
    // qs = {id: 123, name: "xxx"}
});

Although the history api is not used to correct the link, But an anchor is enough.

The above is the content of riot.js learning [9] routing. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!