javascript - 客户端 URL 路由

Question

考虑将我的 ASP MVC 应用程序转换为纯 JS/Html，但它不仅仅是一个页面应用程序，它有几个页面，但每个页面都有很多 ajax 和事件。

无论如何，目前我在 ASP MVC 上的 url 是这样的:

/login
/admin/{action}/{adminId}
/posts/{posterId}
/picture/{pictureId}

所以这一切都很好、简单且容易看到您在 url 中所做的事情，您还可以获得正确的后退按钮行为。因此，尝试将这种事情应用于纯 JS/Html 方法似乎非常困难或不可能。我不需要完全匹配，但我希望做类似的事情:

http://localhost/myapp/posts/10

然后以某种方式能够将实际请求路由到 http://localhost/myapp/posts.html暴露变量。现在我很确定这是不可能的，因为当将上面的内容输入浏览器时，它将尝试在名为 posts 的目录中查找并查找 10，但它不存在。

现在我已经看到了 Crossroads 和 LeviRoutes 以及其他一些类似的技术，但是它们似乎依赖于 hashbang 方法，有些人喜欢其他人讨厌的方法。有没有办法解决？如果没有，任何人都可以指出有关如何使用这些框架的任何好的教程，因为每个框架的文档似乎都很简单。

Answer 1

没有不使用哈希的解决方法。 HTML5 History API 在 IE 和 Opera 上尚不可用。如果您的应用程序针对非常特定的平台，那么您可以使用 History API 而不是哈希。但是，History API 在浏览器之间是不一致的。您可以在这里阅读:http://www.battlehorse.net/page/2011/02/12/html5history.htm

如果您选择使用 History API，那将很容易。你可以在 ASP.NET MVC 中使用任何你想要的路由策略，然后在 JavaScript 中匹配这个策略。您可以在此处阅读有关 History API 的更多信息:https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

如果您选择使用哈希，您需要将一些请求转换为 AJAX 请求:

• 确定请求是否通过 AJAX 完成:
  • 如果 GET/posts/{action}/{id} 是 AJAX，则提供原始内容
  • 如果不是通过 AJAX，将用户重定向到 /#!/posts/{action}/{id}。
• 通过请求正确的内容来处理客户端哈希:
  • 当 hash 更改为 #!/posts/{action}/{id} 时，GET/posts/{action}/{id} 通过 AJAX 和用服务器上的新内容替换内容。
• 拦截 form.onsubmit 事件:
  • 每当表单尝试提交到 /posts/{action}/{id} 时，取消它并使用 AJAX 发布，然后用服务器上的新内容替换内容。

现在您的应用程序应该像单页应用程序一样工作。