如何在Algolia搜索和分页功能中保留额外URL参数

核心思路 #

提前定义需要保留的参数白名单，在所有跳转、提交操作执行前，把白名单参数和新请求的参数做合并后再触发跳转，避免参数丢失。

分场景实现方案 #

1. 前端框架路由场景（Vue/React/Angular等） #

全局劫持路由跳转逻辑，统一合并参数，不需要修改每个业务跳转代码：

• 先定义需要保留的参数白名单，比如追踪类参数utm_source、邀请码invite_code等
• 在全局路由守卫/拦截器中，每次跳转前提取当前URL里的白名单参数，合并到新路由的查询参数中
• Vue Router示例代码：

// 定义要永久保留的参数白名单
const KEEP_PARAMS = ['utm_source', 'invite_code', 'from_channel']

router.beforeEach((to, from, next) => {
  const currentSearch = new URLSearchParams(window.location.search)
  const keepQuery = {}
  // 提取当前地址中需要保留的参数
  KEEP_PARAMS.forEach(key => {
    const value = currentSearch.get(key)
    if (value) keepQuery[key] = value
  })
  // 合并到新路由参数中，避免覆盖新的业务参数
  to.query = { ...to.query, ...keepQuery }
  next()
})

2. 原生表单提交/服务端渲染场景 #

不需要改后端逻辑，直接在前端加隐藏参数即可：

• 在筛选表单内新增对应数量的隐藏input控件，把需要保留的参数值提前写入控件的value属性
• 表单提交时会自动把隐藏域的参数一起带到请求地址中
  示例代码：

<form action="/list" method="get">
  <!-- 保留参数的隐藏域 -->
  <input type="hidden" name="utm_source" value="xxx">
  <input type="hidden" name="invite_code" value="xxx">
  <!-- 原有筛选控件 -->
  <input type="text" name="keyword" placeholder="搜索关键词">
  <button type="submit">筛选</button>
</form>

3. 无框架原生JS场景 #

封装统一的URL生成工具函数，所有跳转都走这个函数自动合并参数：

// 统一URL拼接工具
function buildUrl(basePath, newParams = {}) {
  const targetUrl = new URL(basePath, window.location.origin)
  const KEEP_PARAMS = ['utm_source', 'invite_code', 'from_channel']
  const currentSearch = new URLSearchParams(window.location.search)
  
  // 先写入需要保留的参数
  KEEP_PARAMS.forEach(key => {
    const val = currentSearch.get(key)
    if (val) targetUrl.searchParams.set(key, val)
  })
  // 再写入新的业务参数，覆盖重复的非保留参数
  Object.entries(newParams).forEach(([key, val]) => {
    targetUrl.searchParams.set(key, val)
  })
  return targetUrl.toString()
}

// 跳转时调用示例
window.location.href = buildUrl('/list', { page: 3, category: 'digital' })

注意：白名单仅加入需要全局保留的非业务参数，不要把筛选类、分页类的可变业务参数加入白名单，否则会导致筛选、分页功能异常。

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