Angular 4 如何获取上一路由？实现返回首页功能遇阻

我明白你的问题了——你从homepage跳转到page1后，每次调整筛选条件都会通过router.navigate更新查询参数，这导致浏览器的历史栈里堆了好几个page1的不同状态。现在点返回按钮用history.back()这类方法的话，只会一步步退到上一次筛选的page1，而不是直接回到homepage对吧？

给你两个靠谱的解决办法：

方法一：修改筛选导航逻辑，避免新增历史记录 #

每次更新查询参数时，给router.navigate加上replaceUrl: true选项。这样它不会往历史栈里添加新条目，而是替换当前的page1记录。最终历史栈里只会保留homepage → 当前状态的page1，此时再用history.back()就能直接回到homepage了。

代码示例：

// 更新筛选条件时的函数
updateFilters(newFilterConditions: any) {
  // 整理你的查询参数
  const updatedQueryParams = { ...newFilterConditions };
  
  this.router.navigate([], {
    queryParams: updatedQueryParams,
    replaceUrl: true // 核心：替换当前历史条目，不新增记录
  });
}

方法二：让返回按钮直接导航回homepage #

如果不想改动筛选时的逻辑，那直接在返回按钮的点击事件里用Angular路由跳转到homepage，完全不依赖浏览器的历史栈。这样不管历史栈里有多少条page1的记录，都会直接回到homepage。

代码示例：

// 返回按钮的点击事件处理函数
goBackToHomepage() {
  // 直接导航到homepage路由
  this.router.navigate(['/homepage']);
  
  // 可选：如果希望从homepage再点击返回时，不会回到当前page1，可以加上replaceUrl: true
  // this.router.navigate(['/homepage'], { replaceUrl: true });
}

补充说明：为什么之前的方法失效？ #

因为默认情况下，每次调用this.router.navigate更新查询参数时，Angular都会向浏览器历史栈中添加一条新记录。比如你的历史栈会变成：
homepage → page1（初始状态）→ page1（筛选条件A）→ page1（筛选条件B）
这时候history.back()只会回到上一个page1的状态，而不是直接跳转到homepage。上面的两种方法分别从根源解决历史记录过多的问题，以及直接绕过历史栈实现跳转。

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