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

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');
    }
}

预期行为：

1. 点击 link 会将用户带到第 2 页。
2. 当 page2 初始化时，它应该将状态“/page3”推送到浏览器历史记录。
3. 当用户点击浏览器后退时，它应该进入 /page3，因为它在上面的步骤 2 中被推送到历史记录。

当前行为：

1. 点击 link，将我带到第 2 页，但在推送状态时它会自动重定向到 /第 3 页。
2. 当点击浏览器后退时，我会回到 /page2。

Answer 1

Expected behavior: 1. Clicking on the link takes the user to page2. 2. While page2 is initialized it should push state '/page3' to the browser history. 3. When the user clicks the browser back now it should take to /page3 as it is was pushed to history in step2 above.

因为你做了什么，你的历史状态是：p1 -> p2 -> p3。你的描述里有！你想要这样：

1. 点击link第一推状态p3
2. 然后把用户带到p2，初始化的时候不要push状态
3. 浏览器返回现在按预期工作

---

编辑：

这就是实现它的方法。在 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);
    }
}

我们在这里所做的是将 url 更改为 url 你想成为后面 和 history.replaceState({id:'page3'},'Page3','/page3'); 然后制作一个history.pushState(null, null,locat); 历史上的新条目，第一个 url。

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

Angular platformLocation pushState not working

Angular: take user to home on clicking browser back button

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