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

Question

我正在使用一种名为 Astro (https://astro.build/) 的新技术来构建完全静态的服务器端呈现页面，零 JS 传输。

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

/?search=1234

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

我正在尝试使用 Astro.request 访问 quesrystring 参数，但是包括参数属性在内的对象完全是空的。

是否可以从 .astro page/file 访问查询字符串参数？

Answer 1

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

对于查询字符串：

localhost:3000/test?search=123

获取参数：

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

这种方法可见于：this question以及

Answer 2

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

Answer 3

这可以通过 Astro 实现，并且可以使用 .astro 组件中的 <script></script> 标签来完成。

这是一个 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/

（向下滚动到 'Can I Hydrate Astro Components?'）。

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

的情况

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

How to get the querystring parameters with Asto

javascript

node.js

reactjs

astrojs