如何从特定记录详情页返回筛选结果页而非主页面？

1. 单页应用（SPA）场景：路由传递筛选状态 #

如果用React、Vue这类框架开发，跳转详情页时直接携带当前筛选参数，返回时复用这些参数即可：

• Vue 3示例：
  跳转详情页时带上列表页的查询参数：

  <router-link :to="{ name: 'recordDetail', params: { id: item.id }, query: $route.query }">查看详情</router-link>
  

  详情页返回按钮直接用当前路由的query参数跳转回列表页：

  <button @click="$router.push({ name: 'recordList', query: $route.query })">返回筛选结果</button>
  

• React示例：
  跳转时复用当前页面的搜索参数：

  <Link to={{ pathname: `/detail/${item.id}`, search: window.location.search }}>查看详情</Link>
  

  返回时把搜索参数带回列表页：

  <button onClick={() => history.push({ pathname: '/list', search: history.location.search })}>返回筛选结果</button>
  

2. 多页/静态页面：利用浏览器历史或URL参数 #

• 若筛选后是通过target="_blank"打开新标签页，新标签页的历史栈是独立的，没法直接用history.back()回到筛选页。这时要在跳转详情页时，把所有筛选参数拼到详情页URL上：
  比如筛选后列表页URL是/list?keyword=xxx&status=active，详情页链接就写成/detail/1?keyword=xxx&status=active
  详情页返回按钮直接构建带参数的列表页URL跳转：

  document.querySelector('.back-btn').addEventListener('click', () => {
    const searchParams = new URLSearchParams(window.location.search);
    window.location.href = `/list?${searchParams.toString()}`;
  });
  

• 若不是新标签页跳转，可在筛选完成后用history.pushState()更新历史记录，确保后退时回到筛选页：

  // 筛选操作完成后执行
  const filterParams = { keyword: 'xxx', status: 'active' };
  history.pushState(filterParams, '', `/list?${new URLSearchParams(filterParams)}`);
  

  之后点击浏览器后退按钮或详情页的history.back()就能回到筛选结果页。

3. 服务器渲染场景：后端存储筛选会话 #

当用户执行筛选时，后端生成唯一会话ID，把筛选条件存在Redis或数据库中，然后将会话ID附加到列表页和详情页的URL上：

• 筛选后列表页URL：/list?session=abc123
• 详情页跳转链接：/detail/1?session=abc123
• 详情页返回时跳转到/list?session=abc123，后端根据会话ID恢复筛选条件，渲染出对应的5条记录列表。

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