使用查询参数输入后无法通过后退按钮离开页面 Angular

Question

我在尝试将带分页的页面留在列表中时遇到问题。

original route => path: 'produtos/:categoria/:productId'

所以当进入页面时我将其添加到 init

  updatePage(pageIndex:number){
    this.currentPage = pageIndex;

    this._router.navigate([], {
      relativeTo: this.route,
      queryParams: {
        page: pageIndex
      },
     queryParamsHandling: 'merge',

    });

  }

上面的代码工作正常，例如

• produtos/:categoria/:productId?page=1;
  产品/:categoria/:productId?page=2;
  产品/:categoria/:productId?page=3;

然后我按后退按钮

• rodutos/:categoria/:productId?page=3;
  produtos/:categoria/:productId?page=2;

由于某些原因我无法离开此页面，一直在同一页面重新加载

• -produtos/:categoria/:productId?page=1;

Answer 1

这里的逻辑做得很好：

updatePage(pageIndex:number){
    this.currentPage = pageIndex;

    if (this.currentPage <= 1) {

      this._router.navigate([], {
       replaceUrl:true,
        queryParams: {
          page: pageIndex
        },
        queryParamsHandling: 'merge',

      });
      
    } else {
      this._router.navigate([], {
        relativeTo: this.route,
        queryParams: {
          page: pageIndex
        },
        queryParamsHandling: 'merge',

      });
    }
  }

Answer 2

导航添加查询参数时，尝试添加 replaceUrl: true。这应该允许后退按钮像您没有创建新的导航事件一样工作

https://angular.io/api/router/NavigationBehaviorOptions#replaceUrl