location.replace() 和 location.re

?xml version="1.0" encoding="UTF-8"?

混合开发时，遇到个场景是在当前URL后面拼接参数，同时页面数据更新，但是不会影响页面的history。处理history堆栈时，使用的是pushState()，在处理页面刷新时，遇到了reload和replace，就按照现有场景分别写了两个方法。

代码如下：

setHistoryReplace() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.replace(url);

},

setHistoryLoad() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.reload();

}

但是在测试后，并没有发现replace不能返回当前页面的事情，和 reload的可视表现行为一致，不知道是不是代码写的有问题。

最后找到原因，不是代码不对，是适应场景不对。

参考截图

修改后，在B页面添加方法

setHistory() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.replace('C页面地址');

},

加载A页面，在进入B页面，返回A页面，在 A页面 触发replace，URL为当前页面，只是在URL后面拼接了一个参数，然后，点击页面的前进和返回都能正常表现。因为是拿的当前页替换的当前页，所以返回的页面没有变化，但是地址会有变化。

replace比较符合定义的使用场景应该是这个样子，在A页面中，进入B页面，然后在B页面触发replace(),URL地址是C页面的地址，然后这个时候点击浏览器返回，返回到A页面，而不是B页面。

参考: mozilla文档

参考截图的链接