本文介绍在 Astro 构建的静态站点中，如何通过 URL 路由（如 /country/us）实现数据筛选，并利用客户端跳转保持用户选择的国家选项不丢失，无需服务端逻辑或前端状态管理。
本文介绍在 astro 构建的静态站点中，如何通过 url 路由（如 `/country/us`）实现数据筛选，并利用客户端跳转保持用户选择的国家选项不丢失，无需服务端逻辑或前端状态管理。
在 Astro 中实现“按选项过滤数据并跨页保持选择”这一需求，核心在于将用户选择转化为可分享、可刷新、可导航的 URL 路径，而非依赖内存中的 JavaScript 状态（如 useState）。Astro 的静态优先特性天然适合这种基于路径的过滤模式——它既保证了 SEO 友好性与加载性能，又规避了客户端状态在页面跳转时丢失的问题。
✅ 推荐方案：路径驱动过滤（Static Route-Based Filtering）
假设你有如下 src/data.json 数据文件：
[
{ "country": "us", "title": "United States" },
{ "country": "gb", "title": "Great Britain" },
{ "country": "jp", "title": "Japan" }
]
1. 创建动态路由页面（src/pages/country/[country].astro）
Astro 支持基于参数的文件系统路由。该文件会匹配所有形如 /country/us、/country/gb 的路径：
---
import data from '../../data.json';
const { country } = Astro.params;
const countryData = data.find(item => item.country === country);
if (!countryData) {
throw new Error(`Country "${country}" not found`);
}
---
<h1>{countryData.title}</h1>
<p>Country code: <code>{country}</code></p>
构建后，Astro 会为每个有效 country 值生成独立的静态 HTML 页面（如 dist/country/us/index.html），完全零 JS 运行时开销。
2. 在首页（或导航页）添加带跳转逻辑的下拉框（src/pages/index.astro）
---
import data from '../data.json';
---
<select id="country-select"><option disabled selected>Select a country</option>
{data.map(item => (
<option value="{item.country}" key="{item.country}">
{item.title}
</option>
))}
</select><script is:inline>
const select = document.getElementById('country-select');
select?.addEventListener('change', (e) => {
const value = e.target.value;
if (value) {
window.location.href = `/country/${value}`;
}
});
</script>
? 关键点：
<script is:inline></script>确保脚本内联注入，避免额外请求；使用window.location.href触发完整页面跳转，自然保留当前选择（因为目标页 URL 已编码该选择）。
✅ 优势总结
- 状态持久化无感：选择即跳转，URL 即状态，刷新、分享、前进/后退均正常；
-
零客户端状态管理：不依赖
localStorage、URL 查询参数（?country=us）或复杂状态同步逻辑； - 完全静态 & 高性能：所有页面预渲染，无 hydration 开销；
-
SEO 友好：每个国家页拥有唯一、语义化 URL 和独立
<title></title>/内容。
⚠️ 注意事项
- 若需「默认选中当前路径对应选项」（例如访问
/country/jp时下拉框高亮 Japan），需在index.astro中读取Astro.url.pathname并设置selected属性（适用于同页面内切换场景）； - 如需支持多条件组合过滤（如 country + category），可扩展为嵌套路由：
/country/[country]/category/[category]； - 所有数据应确保在构建时可静态解析（即不能依赖运行时 API 调用）。
此模式是 Astro 官方推荐的「静态优先」实践范例——用最简路径语义承载用户意图，让架构更健壮、更易维护。
