什么是URL路由？

URL路由就是当点击一个链接，当前页面并不发生跳转，但页面的内容发生变化。当这发生时，通常会在当前URL后面附上一个"hash"，也就是"#"，这样用户就可以直接导航到他们需要的内容，如同使用浏览器的前进和后退按钮。URL路由几乎是任何单页应用程序的基础。Sammy.js是完成这个功能非常简单的库，这篇文章的后面会提供一个Sammy.js如何使用的简单例子。

优点

快。用户不需要等待页面的加载，如同本地应用程序。

缺点

不利于搜索引擎索引内容，不过，如果你对此感兴趣，总是会有办法的。

使用Sammy.js 和 Knockout.js的URL路由例子

我发现URL路由最简单的方式是使用sammy.js和knockout.js。下面开始设置knockout视图模型，然后初始化sammy.js:

function viewModel() {
    var self = this;
    self.currentView = ko.observable();
    self.views = ko.observableArray(["Home", "About", "Contact"]);
}

var vm = new viewModel();

ko.applyBindings(vm);

Sammy(function () {
    /*
    **"#:view"的意思是sammy获取hash tag(#)后面的任何内容并将它应用为"this.params.view"的值
    */
    this.get('#:view', function () {
        //Set currentView on your view model
        vm.currentView(this.params.view);
    });
}).run('#Home');//指定程序的开始页面或留空

在下面的HTML代码段中，我有一个knockout模板和设置为currentView的name绑定。对于每一个视图，我有一个带有模板id匹配视图名称的单独模板。导航条使用twitter bootstrap，当"currentView"的值等于每个按钮引用的视图时应用css 类 "active".

<ul class="nav nav-pills" data-bind="foreach:views">
    <li data-bind="css: {active: $root.currentView() == $data}"> 
        <a  data-bind="text:$data, attr:{href:'#' + $data}"></a>
    </li>
</ul>

<div class="container">
    <div class="row">
        <div class="span12">
            <div data-bind="template: {name: currentView()}"></div>
        </div>
    </div>
</div>

<script type="text/html" id="Home">
    <div>
    <h2>Home</h2>
    </div>
</script>
<script type="text/html" id="About">
    <div>
    <h2>About</h2>    
    </div>
</script>
<script type="text/html" id="Contact">
     <div>
    <h2>Contact</h2>
    </div>
</script>

下面是在jsFiddle中的例子：

原文链接：http://www.softfinity.com/blog/an-simple-introduction-to-url-routing/