javascript - 无需哈希或正则表达式的替代单页应用程序路由机制

标签 javascript url routes url-routing single-page-application

我正在开发自己的 SPA(单页应用程序)堆栈工具。我目前正在考虑路由器机制 - 我怀疑是否应该使用基于哈希 (#) 的路由器,或者考虑其他东西:

  1. 使用window.history API - twitter 已经做了一些小型 SPA 助手:为 twitter.com 实现 PushState ( https://blog.twitter.com/2012/implementing-pushstate-for-twittercom ) - 真的不知道为什么其他流行的(React、Angular)框架路由器不使用它并依赖哈希机制?

  2. 使用哈希实现,但为了提高 url 映射速度(和实现),仅使用一层嵌套路由 + 参数,例如:

    • #/posts ,
    • #/post-new/ ,
    • #/post/<post-id> ,
    • #/post-edit/<post-id> ,
    • #/post-comments/<post-id>

等等。

所以没有复杂的正则表达式,在第一个斜杠之后总是只有一个,非常具有描述性的路由段,在第二个斜杠之后将是一个参数(或参数,例如 ?param1=X&param2=Y 等)。这种(第二点)方法有什么缺陷吗?

编辑:

由于重复的答案 - 不,我不想使用现有的解决方案(Angular/React/Ember 等) - 我想自己实现它(我想为自己构建工具,而不是与现有的 API 斗争)这不适合我)

最佳答案

简短回答

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

长答案

您可以使用AngularJS并删除 #从告诉 Angular 使用历史 API 的 URL ( tutorial ):

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

    $locationProvider.html5Mode(true);

  }]);

也许您需要 <head> :

<base href="/">

$locationProvider.html5Mode(true);你实际上告诉 Angular 使用历史 API。

“真的不知道为什么其他流行的(React、Angular)框架路由器不使用它并依赖哈希机制?”因为IE9及之前版本不支持history api,如您所见here .

没有 # 的 Angular 应用程序示例所以html5Mode启用的是 Google Font

关于javascript - 无需哈希或正则表达式的替代单页应用程序路由机制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40941343/

相关文章:

c# - 如何将 '\' 更改为 '/'

javascript - 无法确定数据的编码方式

ruby-on-rails-3 - 错误后渲染编辑时,Rails 将 id 附加到单一路由

ruby-on-rails - 带有子文件夹的 rails 布线

c - 获取网关以用于 ANSI C 中的给定 ip

javascript - dispatchEvent 返回 true 但在 Chrome 中不起作用

javascript - 如何通过jquery从右向左滑动元素

javascript - Ext JS4 如何从菜单打开文件打开对话框

php - 使用 jquery 更改多个动态 PHP 生成的文本框的值

java - Vertx 的路由器问题