1

当您启用 html5 模式时实际发生了什么？这可能会回到单页应用程序中路由是如何发生的这一点

我之前的看法（可能是错误的）：查看 angularjs 应用程序中的脏 url，我一直认为它是 url 片段，不同的视图绑定到不同的片段。所以简而言之，我们已经拥有所有页面，并且正在为特定 url 显示特定片段。

现在，为了删除散列，您必须将 html5mode 设置为 true，并且您必须告诉服务器为除您的 apis 之外的每个请求返回索引页面。有点像

app.get('/ap1',some);
//more apis 
*
*
*
//in the end
app.get('*' ,(req,res,next) => req.sendFile('index.html'));

每次 url 更改时，请求不应该转到服务器并重新加载页面吗？

html5mode 对浏览器有什么作用？在像 react 和 angular(2 or greater) 这样的较新框架中，您甚至不必启用 html5mode（除非在 angular 2 中，您必须告诉您想要什么样的 url）。

这是什么法术？

4

1 回答 1

4

这使用History API。

它的设计使开发人员可以：

  • 告诉浏览器诸如“我已经使用 JavaScript 更改了页面的内容。它现在与您要求时获得的页面相同/other/page”
  • 拦截Back和Forward的点击，以便他们可以使用 JS 将页面内容更改为与未拦截 Back/Forward 的点击时导航到的 URL 相同。

这会更新浏览器历史记录和地址栏中的 URL，而不会触发正常导航到新页面。这个想法是，您可以在页面之间提供更流畅、更快的转换，同时仍然拥有真正的 URL，如果您链​​接到它们或稍后再返回它们，它们仍然可以正常工作。

那样：

  • 如果 JavaScript 因任何原因失败，真实的 URL 仍然可以传递页面
  • 如果搜索引擎索引 URL，它会从中获取真实数据
  • 如果访问者登陆一个不是主页的 URL，他们会立即获得他们请求的内容，而无需等待 JavaScript 运行、发出额外的 Ajax 请求并在客户端组装所有部分。

它是为了回应人们使用hangbangs而不是真实的URL而设计的。

现在，为了删除哈希，您必须将 html5mode 设置为 true，并且您必须告诉服务器返回除您的 api 之外的每个请求的索引页面

这是来自 Angular 的糟糕建议。

它放弃了历史 API 可以提供的所有好东西，以便具有 hashbang 的所有缺点，但 URL 看起来更好。

正确执行的问题是它需要在服务器和客户端上复制逻辑，这是很多工作。同构 JavaScript是一种减少这种工作量的方法。

html5mode 对浏览器有什么作用？

没有。该html5mode变量由 Angular 读取。浏览器并不直接关心它。它告诉 Angular 使用 History API 而不是 hangbang URL。

在像 react 和 angular(2 or greater) 这样的较新框架中，您甚至不必启用 html5mode（除非在 angular 2 中，您必须告诉您想要什么样的 url）。

他们只是默认使用 History API。

于 2018-01-09T10:45:09.183 回答