Flutter Web应用中隐藏URL页面参数并生成静态URL

要实现不带查询参数的静态商品详情URL，同时保证商品名称更新后URL不变，核心是给每个商品分配固定的静态标识符（slug），而非直接用商品名称或依赖查询参数。具体步骤如下：

1. 为每个商品生成固定的静态Slug #

• 别直接用商品名称当URL路径（名称易变），建议用商品唯一ID结合初始名称生成slug，比如item-123或vintage-coffee-mug-123
• 这个slug一旦生成就永久存储（比如存在数据库或商品元数据中），后续商品名称修改时，slug保持不变，完全匹配SEO需求

2. 修改前端路由跳转逻辑 #

• 移除原代码queryParams里的name、type、rating等参数，跳转详情页时直接用slug构建URL：

  // 原带参数的跳转逻辑（废弃）
  // router.push({ path: `/${listViewPlacesRecord.name}`, query: queryParams })
  
  // 修改后的静态URL跳转逻辑
  router.push({ path: `/${listViewPlacesRecord.slug}` })
  

• 调整前端路由配置，让详情页路由匹配slug格式：

  {
    path: '/:slug',
    name: 'ProductDetail',
    component: ProductDetailPage,
    props: true // 可选，将slug作为props传入组件
  }
  

3. 调整商品数据获取逻辑 #

• 前端详情页不再从URL查询参数中读取name、type等数据，而是通过slug请求后端接口获取完整商品信息
• 后端接口需支持通过slug查询商品，比如设计为/api/products/:slug，不再依赖查询参数

针对你提供的代码片段的修改 #

直接删除冗余的queryParams配置，无需再序列化传递这些参数：

// 原queryParams配置（移除）
// queryParams: {
//         'name': serializeParam(
//             listViewPlacesRecord.name,
//             ParamType.String,
//         ),
//         'type': serializeParam(
//             listViewPlacesRecord.type,
//             ParamType.String,
//         ),
//         'rating': serializeParam(
//             listViewPlacesRecord.rating,
//             ParamType.double,
//         ),...
// }

// 跳转时直接使用静态slug，无需携带query参数
router.push(`/${listViewPlacesRecord.slug}`)

这样处理后，每个商品详情页的URL就是example.com/[商品固定slug]，既无查询参数，商品名称更新后URL也不会变化，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Sabritocaster