使用HTML5歷史記錄API獲取初始狀態

Question

我一直在尋找的所有內容只是一個有關如何使用pushState ， replaceState ， history.state等的教程。這些概念很簡單，但是我想知道人們如何解決的一件事是如何知道初始狀態是什么。

假設您的SPA托管在https://example.com/en-us/myapp/上 。 轉到此處，您的應用程序主頁已加載，單擊鼠標左鍵，它會執行pushState以查看您訪問https://example.com/en-us/myapp/get/users 。 太好了，現在您可以看到用戶列表，而且由於有了History API，它並不是實際的頁面加載。

但是，現在讓我們假設用戶為https://example.com/en-us/myapp/get/users狀態添加了書簽，並在此URL上啟動了該應用程序。 好的，所以您的服務器會監聽並提供應用程序。 我的問題是，您如何知道get/users是當前狀態，並且需要顯示關聯的視圖？ 您是否只知道您的應用程序托管在https://example.com/en-us/myapp/ ，以便您了解之后的所有信息？

像這樣：

function getState (uri) {
    return uri.match(/^https:\/{2}(?:w{3}\.)?example.com\/en-us\/myapp\/?(.*)/i)[1];
}

var state = getState(location.href);

如果state為false，則加載初始視圖，否則處理狀態並在state === 'get/users'時顯示用戶列表？

Answer 1

是的，那是正確的。 但是，您可以嘗試使用location.pathname來獲取狀態，以便您的正則表達式不需要包含域名。

例如：

function getState (uri){
  var path = uri.split("myapp", 2)[1];    // This will split the pathname after 'myapp'
  console.log(path)                       // Just for debugging purposes

  // Now we can decide what to do with the path (i.e. "/get/users")
  // For example, we can use a switch or a simple if statement

  if (path === '/get/users'){
    return true
  } else {
    return false
  }

}

var state = getState(location.pathname);

那只是路由器的一個簡單示例。 現在，您可以嘗試為SPA構建自己的路由器。 另外，如果您想使用其他方法，可以使用許多庫。 您可以根據需要查看這些內容。

• NAVIGO
• router.js

另外，如果您使用的是框架來構建SPA，則它們通常會內置自己的路由功能。這些只是內置路由器的許多框架中的一部分。（對不起，我的聲譽不到10，不允許有兩個以上的鏈接）。

• Vue.js — vuejs.org/v2/guide/routing.html
• Mithril.js — mithril.js.org/#routing
• Ember.js — guides.emberjs.com/v2.13.0/routing/

當然，最終使用哪種選擇是您的選擇。 您可以通過簡單地為SPA中的不同鏈接/頁面實現開關來擴展我提供的示例。 祝您使用應用程序一切順利！