javascript - "href' s“是在网站内切换页面的正确方法吗？

Question

所以我一直在使用老式的方式在我的网站内的页面之间切换，我在每个页面上包含我的标题并使用 a/href 转到另一个页面..我只使用ajax 请求仅在页面本身内。正如我所说，不要将访问者切换到另一个页面，我使用 native href 来实现这一点。

每次我通过jquery ajax加载新页面时，我都会查看history.pushState()来更改地址栏上的url。而且它做得很好。问题是，当我刷新页面时，它确实保留相同的 url 并再次加载该 url/文件。但文件返回时是裸露的，没有 CSS，也没有 header ，因为这些只包含在我的索引中。

我使用 php 作为我的 SS。

有什么好的建议吗？

Answer 1

使用 href 非常好，而且是标准的。但是，通过避免通过 ajax 加载整页，可以获得一些性能提升。

如果您确实想要使用pushState和ajax，您必须配置您的服务器，以便所有HTTP请求都到达您的索引页面/路由器。您可以在 nginx、apache、express js 或您在后端使用的任何内容中执行此操作。

然后在 JS 中，您需要嗅探 window.location 以查看用户当前所在的页面，并立即触发 ajax 请求来加载该页面。

或者，一种更快但更困难的方法是不将服务器设置为将所有请求指向您的索引，并且实际上为它们请求的页面提供完整的 HTML (HTML、CSS、页眉和页脚)，这样页面就不会“裸露”地返回。这将使初始页面加载速度更快。之后，您可以在 Ajax 请求在站点中导航时继续使用它们。

如何执行此操作取决于您的技术堆栈。如果你像我一样使用 webpack，那么至少在开发模式下你可以设置 historyApiFallback: true 让所有请求“回退”到你的索引，然后我使用 React Router 来加载适当的页面。但同样，您可能会使用不同的东西。