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

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. 点击链接会将用户带到第 2 页。
2. 当 page2 初始化时，它应该将状态“/page3”推送到浏览器历史记录。
3. 当用户现在点击浏览器返回时，它应该转到 /page3，因为它已在上面的步骤 2 中被推送到历史记录。

当前行为：

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

Answer 1

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

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

Answer 2

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

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

1. 点击链接第一次推送状态p3
2. 然后带用户到p2，初始化时不要push state
3. 浏览器现在按预期工作

---

编辑：

这就是您可以实现它的方式。在page2.component.ts.

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

不过，请再次阅读doc。