如何在html页面刷新时重新加载所有部分

Question

我正在试用这个html库，到目前为止我非常喜欢它。我不太明白的是如何处理整页的重载。

链接

<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>

<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>

它非常好，因为它加载了我所需的div中的内容，并将/#/link应用到我的url栏和浏览器历史记录中。

但是当我在任何url/#/profile或/#/feed上重新加载页面时，页面会重新加载到默认状态，不包括/#/profile或/#/feed页面上指定的内容。

如果我只是使用/profile或/feed的url，我得到一个404错误的预期。

一切都很神奇，我做错了什么吗?

Answer 1

对于整个页面加载，您需要:

1. 呈现内容服务器端

2. 使用html与load触发器加载页面加载的内容。你可以在这里找到一个例子https://htmx.org/attributes/hx-trigger/

在第二种情况下，您仍然需要能够确定服务器端加载的页面类型以呈现适当的div。

<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>