使用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中的不同链接/页面实现开关来扩展我提供的示例。 祝您使用应用程序一切顺利！