Question

我正在尝试在APP初始化时将新状态推送到浏览器历史记录，但是在推送状态时，它还会重定向不需要的页面。

这是一个演示工作应用程序。 https://angular-tet5fy.stackblitz.io/page2?fbclid=IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU

这是代码：

ngAfterViewInit() {
    console.log('init called');
    var x = document.referrer;
    console.log('ref', x);

    if (x) {
      console.log('pushing state');
      this.location.pushState({id:'page3'}, 'Page3', '/page3');
    }
}

预期行为：

单击链接会将用户带到page2。
初始化page2时，应将状态'/ page3'推入浏览器历史记录。
现在，当用户单击浏览器时，应该将其转到/ page3，因为它已在上面的步骤2中被推到历史记录中。

当前行为：

单击链接会将我带到page2，但在推送状态时它会自动重定向到/ page3。
单击浏览器后，它带我回到/ page2。

Answer 1

预期的行为： 1.单击链接将用户带到第2页。 2.初始化page2时，应将状态'/ page3'推入浏览器历史记录。 3.当用户现在单击浏览器时，它应该进入/ page3，因为它已在上面的步骤2中被推到历史记录中。

由于您所做的，您的历史记录状态变为：p1-> p2-> p3。这就是您的描述！您想要这样：

点击链接的第一个推送状态p3
然后将用户带到p2，并且在初始化时不推送状态
浏览器现在可以正常工作

编辑：

这是实现它的方法。在page2.component.ts中。

ngOnInit() {
  history.replaceState({ data: 'at page 3' }, 'Page3', '/page3');
  history.pushState({ data: 'at page 2' }, 'Page2', '/page2');
}

但是再次阅读doc。

Answer 2

ngAfterViewInit() {
    console.log('init called');
    var x = document.referrer;
    console.log('ref', x);

    if (x) {
      console.log('pushing state');
      let locat = location.href;
      history.replaceState({id:'page3'},'Page3','/page3');
      history.pushState(null,null,locat);
    }
}

我们在这里所做的操作是使用history.replaceState({id:'page3'},'Page3','/page3');将URL更改为要成为后退的URL ，然后使用history.pushState(null, null,locat);在历史记录中重新输入第一个网址。

我已经在两个不同的帖子中回答了这个问题，只是稍有不同：

Angular platformLocation pushState not working

Angular: take user to home on clicking browser back button

实时示例分叉： https://angular-stack-55624908.stackblitz.io/page2

历史记录推送状态重定向，而不仅仅是将新状态推送到浏览器历史记录

2 个答案: