SPA路由器開發手記-解決chrome下location.replace后，瀏覽器返回操作導致頁面刷新的問題

我的路由器是參考的backbone和EXT5做的。其中history采用的hashchange的方式來進行監控，IE67不支持的問題可以參考司徒大這篇文章。

我要說的是在chrome下通過location.replace替換完hash的時候，用戶調用瀏覽器的后退操作，將導致頁面刷新

相信backbone的用戶也會有這個問題，我的解決方法是用history.replaceState的方式更新hash 就木有這個問題了

以下是我修改的backbone  history中的_updateHash方法

_updateHash: function(location, fragment, replace) {
  var me = this,
　　　 hash = '#' + fragment;

  if (replace) {
    //由於chrome下location.replace替換當前頁后 進行返回操作會刷新頁面
　　//ff無辜受到牽連 同罰之 //所以我們這里采用replaceState的方式更新hash if ((typeof me.history.replaceState === 'function') && !me.iframe) { me.history.replaceState(me.history.state, '', hash); } else {

      //先移除location中的錨點信息
      var href = location.href.replace(/(javascript:|#).*$/, '');
      //替換當前頁 這么做不會產生瀏覽歷史
      location.replace(href + hash);
    }
  } else {
    // Some browsers require that `hash` contains a leading #.
    // 如果不是 則簡單的location.hash='#xxxx'
    location.hash = hash;
  }
}

　　值得說一下的是backbone的Router非常非常薄,從URL Fragement->handler 映射的方式我覺得並不可取，人們常常抱怨路隨着項目擴張由規則注冊越來越膨脹很大一部分就是因為這個原因（另外一部分是路由規則的單一）。

　　我的路由模塊 是從URL Fragement->routeData的映射, 該模塊由Router、Route，History三個部分組成，History就不說了 主要就是圍繞hashchange進行的封裝，Router主要是處理History的hashchange事件，在發生hashchange事件的時候 通過調用其中的Route一個一個對hash進行識別，如果能夠匹配 則從hash中提取並返回routeData