如何使用Astro获取查询字符串参数

Question

我正在使用一种名为 Astro 的新技术（https://astro.build/）来构建一个完全静态的服务器端渲染页面，交付零 JS。

我有一个带有简单文本输入表单的页面，当用户填写该表单并单击提交按钮时，它会向 astro 页面发送 GET 请求。网址看起来像这样......

/?搜索=1234

我想要做的是访问该查询字符串参数，以便将我的用户重定向到另一个静态页面/1234。

我尝试使用 Astro.request 访问 quesrystring 参数，但该对象（包括参数属性）完全为空。

是否可以从 .astro 页面/文件访问查询字符串参数？

Answer 1

您可以使用

Astro.url

（自 v1.0.0-rc 起可用）。

例如

---
const search = Astro.url.searchParams.get('search') || '';
---

{search ? <p>you searched for: {search}</p> : null}

<!-- rest of your template markup -->

Answer 2

我联系了 Astro 的开发者，最终收到了一封电子邮件。 Astro 无法实现此功能，这不是一个错误，而是我对 Astro 工作原理的误解。 Astro 中的页面是预先渲染的并且完全静态。

Answer 3

我想做同样的事情，但这似乎是 Astro 中的一个错误，它不提供 queryString 参数，但这里有一种仅使用 Vanilla javascript 实现它的方法，但请注意，这只能在客户端完成这只是 javascript...

对于查询字符串：

localhost:3000/test?search=123

获取参数：

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

这种方法可以在：这个问题以及

中看到

Answer 4

这可以通过Astro实现，并且可以使用

<script></script>

组件中的

.astro

标签来完成。

这是一个

example.astro

文件：

---
<!-- imports go in here -->
---
<script>
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log('params', params);
</script>

<!-- rest of your template markup -->

可以在此处找到以这种方式与 Astro 一起使用

<script></script>

标签的文档：https://docs.astro.build/en/core-concepts/component-Hydration/

（向下滚动到“我可以水合 Astro 成分吗？”）。

此功能专门用于简单的 DOM 交互或需要访问 JavaScript

window

或

document

的情况。