历史记录推送状态重定向,而不仅仅是将新状态推送到浏览器历史记录 [英] History push state redirects instead of just pushing new state to browser history

查看:129
本文介绍了历史记录推送状态重定向,而不仅仅是将新状态推送到浏览器历史记录的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am trying to push a new state to browser history on my APP initialization but while pushing the state it also redirects the page which is not required.

这是一个演示工作应用程序. https://yularbetd? IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU

Here is a demo working 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.

推荐答案

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);在历史记录中重新输入第一个URL.

What we do here it's change the url to the url you want to be the back with history.replaceState({id:'page3'},'Page3','/page3'); and then make a new entry in the history with history.pushState(null, null,locat); witht he first url.

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

I answered you this question already in two different posts with only a little variation:

Angular平台位置pushState不起作用

> Angular:在单击浏览器时将用户带回家后退按钮

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

这篇关于历史记录推送状态重定向,而不仅仅是将新状态推送到浏览器历史记录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆