使用单个URL创建多页设计

Question

我的目标是在一个页面中创建多个屏幕。根据操作，用户将能够从一个屏幕导航到另一个屏幕。我已经共享了以下图片

第一屏幕

当用户单击任何类别时，它将导航到第二个屏幕。

第二个屏幕

在单击时会再次返回到第一个屏幕，而无需更改URL。我尝试创建一个完整的页面模式，但无法实现这种功能。我不确定是否应将其作为具有多个模式的模式来完成屏幕。

请向我建议我可以实现此目标的任何方法。

Answer 1

您可能要指的是创建SPA或单页应用程序。可以通过“ Vanilla” JavaScript或通过许多JavaScript库或框架之一来实现。

Reactjs，Angular和Vuejs可能是最常见的。

如果您要使用Reactjs，则可以使用所谓的React Router。 React Router可以很轻松地完成您想做的事情。在Vanilla JavaScript中执行此操作将需要大量工作，否则将非常难看。

无论您问什么，所以一种方法是使用JavaScript加载iFrame或制作顶级父元素display: none，然后再使用另一个父元素display:...

此外，如果您考虑的是一些不太hacky的东西，但没有React或同行的东西那么复杂，那么请查看此链接以获取相关文章。也许这是您希望的前进之路。

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng