Question

我正在使用自己的SPA（单页应用程序）堆栈工具。我正在考虑路由器机制 - 我怀疑是否应该使用基于哈希（＃）的路由器，或者考虑别的东西：

使用window.history API - twitter已经做了一些小型SPA助手：为twitter.com实现pushState（https://blog.twitter.com/2012/implementing-pushstate-for-twittercom） - 真的不知道为什么其他流行的（React，Angular）框架路由器不使用它并依赖哈希机制？
使用哈希实现，但是为了提高url映射速度（和实现），只使用一级嵌套路由+ params，例如：
- #/posts，
- #/post-new/，
- #/post/<post-id>，
- #/post-edit/<post-id>，
- #/post-comments/<post-id>

等。

因此，没有复杂的正则表达式，在第一次斜杠之后总是只有一个非常具有描述性的路径slug，而在第二次斜杠之后将是一个参数（或诸如?param1=X&param2=Y之类的参数等）。这种（第二点）方法有任何缺陷吗？

编辑：

由于重复的答案 - 不，我不想使用现有的解决方案（角度/反应/余烬等） - 我想自己实现它（我想为自己构建工具，而不是与现有的API斗争那只是不适合我）

Answer 1

简短回答

良好前端路由的唯一两种可能性是使用history api或默认的哈希实现。

答案很长

您可以使用AngularJS并从网址中删除#告知角度以使用历史记录API（tutorial）：

angular.module('test', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

  }]);

也许您需要<head>：

<base href="/">

使用$locationProvider.html5Mode(true);实际上告诉angular使用历史记录api。

“真的不知道为什么其他流行的（React，Angular）框架路由器不使用它并依赖哈希机制？”因为IE9和之前的版本不支持历史记录api，因为您可以看到here。

启用# html5Mode以启用-b的角度应用示例Google Font

备用单页应用程序路由机制，没有哈希或正则表达式

1 个答案: