之前在看durandal框架的文檔的時候，在路由這一塊，遇到一個特別的參數splat參數，當時看不明白是什麽意思，現在明白了，特此記錄

之前不明白很大一部分的原因是我把路由和路由指向的地址給搞混了，這兩個是分開的概念，當前，主要是之前沒有接觸過這塊，對於這個可以參考sammy.js的route來看。

舉個例子：路由a/b/c和a/b/d是兩個路由，但是這兩個路由可能指向的是同一個模塊(在durandal框架中)，或者匹配這兩個路由後進行的是同一個操作(在sammyjs中)。

通俗的說路由a/b/hello和a/c/hello 跳轉的html頁面可以是同一個hello.html文件。

現在說說路由的種類，一般有三種：

1. a/b/c - 這種屬於是固定的路由
2. a/b/c/:name - 這種屬於帶參數的路由，其中冒號開頭的表示一個參數，也可以多個/a/b/:name/:age,也可以a/b/(:name)，表示參數可以省略，框架和庫都有相關的獲取參數值的方法
3. a/b/c/*anything - 這種叫做帶splat參數的路由，在/a/b/c/(註意末尾還有個斜杠)以後的字符串通通都會賦值給一個叫splat的參數。然後通過對應方法獲取

下面是代碼示例(druandal和sammy.js)

durandal生成route的代碼:

javascript:

define(["knockout", "durandal/app", ‘plugins/router‘
 
], function(ko, app, router) {
    var type = ko.observable("");
    var id = ko.observable("");
    var splat = ko.observable("");
    return {
        type: type,
        id: id,
        splat: splat,
        navToDemo1: function() {
            router.navigate(‘route-demo1‘)
        },
        navToDemo2
 
: function() {
            debugger;
            var routeStr = ‘route-demo2‘;
            if(this.type() !== ‘‘) {
                routeStr += ‘/‘ + this.type();
            } else {
                return;
            }
            if(this.id() !== ‘‘) {
                routeStr += ‘/‘ + this.id();
            }
            router.navigate(routeStr);
        },
        navToDemo3: function() {
            debugger;
            var routeStr = ‘route-demo3‘;
            if(this.splat() !== ‘‘) {
                routeStr += ‘/‘ + this.splat();
            }
            router.navigate(routeStr);
        }
    }
})

view:

<div class="module">
    <div>
        <p>debug 信息:</p>
        <pre data-bind="text:ko.toJSON($root,null,2)"></pre>
    </div>
    <hr />
    <div class="content">
        <h1>導航頁</h1>
        <hr />
        <p>route:route-demo1</p>
        <p>規則：可以適配route-demo1</p>
        <button class="btn btn-danger" data-bind="click:navToDemo1">nav to router-demo1</button>
        <hr />
        <p>route:route-demo2/:type(/:id)</p>
        <p>規則：可以適配route-demo2/type和route-demo2/type/id</p>
        <fieldset id="">
            <legend>參數</legend>
            <label for="">type：<input type="text" data-bind="textInput:type"/></label>
            <label for="">id:<input type="text" data-bind="textInput:id"/></label>
        </fieldset>
        <button class="btn btn-success"  data-bind="click:navToDemo2">nav to route-demo2</button>
        <hr />
        <p>route:route-demo3*details</p>
        <p>規則：可以適配route-demo3(/anythings)</p>
        <fieldset id="">
            <legend>參數</legend>
            <label for="">splat：<input type="text" data-bind="textInput:splat" style="width: 400px;"/></label>
        </fieldset>
        <button class="btn btn-default" data-bind="click:navToDemo3">nav to route-demo3</button>
    </div>
</div>

接收部分的js：

define(["knockout"], function(ko) {
    var args = ko.observable();
    
    return {
        args:args,
        activate: function() {
            debugger;
            var argsArr = [].slice.call(arguments);
            if(argsArr.length===0){
                args(‘//通過路由傳入的值為空‘);
            }else{
                args(ko.toJSON(arguments,null,2));
            }
        }
    }
})

以下是sammy的demo代碼：

            //$.sammy 和 Sammy 等價 ，默認使用的app節點為body節點
            var app = $.sammy(‘#main1‘, function(contextSammy) {
                var sam = contextSammy;
                //context 和 this 相等
                debugger;
                //http://sammyjs.org/docs/routes
                //this.get, post, put, delete(del)
                //#/, test/path/, #/my_path/:var
                this.get(‘#/‘, function(context, nextRoute) {
                    debugger;
                    $(‘.welcome‘).text(‘Welcome! by $.sammy‘);
                    $.get(‘data/hello-world.html‘, function(data, status, promise) {
                        debugger;
                        // save the data somewhere
                        $(data).appendTo(‘.hello-world‘);
                        sam.log(‘step one is loaded;‘);
                        nextRoute();
                    });
                }, function(context, nextRoute) {
                    debugger;
                    $.get(‘data/hello-world.html‘, function(data, status, promise) {
                        debugger;
                        // save the data somewhere
                        $(data).css({
                            ‘font-size‘: ‘30px‘,
                            ‘color‘: ‘green‘
                        }).appendTo(‘.hello-world‘);
                        sam.log(‘step two is loaded;‘);
                        nextRoute();
                    });
                }, function() {
                    sam.log(‘all data is loaded;‘);
                });
                // route(verb, path, callback)
                this.route(‘get‘, ‘#/hi-route‘, function(context, nextRoute) {
                    alert(‘hi by this.route‘);
                });
                // verb(path, callback)
                this.get(‘#/hi-get‘, function(context, nextRoute) {
                    alert(‘hi by this.get‘);
                });
                this.put(‘#/post/form‘, function() {
                    alert(‘put to #/post/form‘);
                    return false;
                });
                this.get(/#\/color/, function() {
                    alert(‘start with color request‘);
                });
                this.get(‘#/by-name/:name‘, function() {
                    alert(this.params[‘name‘]);
                });
                this.get(/\#\/child\/(.*)/, function() {
                    alert(this.params[‘splat‘]);
                });
            }).run(‘#/‘);

結語：路由只要在web框架裏面基本都有，比如react-route,vue-route等等，但是概念都是一樣的

前端路由參數說明