Difference between location.href, location.replace and location.assign

Window.location 是一个属性，它返回一个 Location 对象， 其中包含有关文档当前位置的信息。此 Location 对象表示它所链接的对象的位置（URL），即保存有关当前文档位置（主机、href、端口、协议等）的所有信息。三个命令都用于将页面重定向到另一个页面/网站，但它们对浏览器历史记录的影响不同。

window.location.href 属性：

• 该HREF位置对象的属性存储当前网页的URL。
• 在更改href属性时，用户可以导航到新 URL，即转到新网页。
• 它将一个项目添加到历史列表中（这样当用户单击“返回”按钮时，他/她可以返回到当前页面）。
• 更新 href 属性被认为比使用assign() 函数更快（因为调用函数比访问属性慢）。

使用：

window.location.href = 'https://juejin.cn/';

window.location.replace 属性：

• 该 replace 函数用于导航到一个新的 URL ，而不添加新记录的历史。
• 顾名思义，该函数“替换”历史堆栈中最顶层的条目，即通过用新条目覆盖它来从历史列表中删除最顶层的条目。
• 因此，当用户点击“返回”按钮时，他/她将无法返回当前页面。
• 因此，assign() 和 replace() 方法之间的主要区别在于 replace() 函数将从会话历史记录中删除当前页面。
• 替换功能不会清除整个页面历史记录，也不会使“返回”按钮失效。

用法：

window.location.replace("https://geeksforgeeks.org/web-development/")

window.location.assign 属性：

• 该 assign 功能类似于 href 属性，因为它也被用于导航到一个新的 URL。
• 但是，assign 方法不显示当前位置，它仅用于转到新位置。
• 与 replace 方法不同，assign 方法向历史记录添加一条新记录（这样当用户单击“返回”按钮时，它可以返回当前页面）。
• 但是，与更新 href 属性相比，调用函数被认为更安全且更具可读性。
• 与 href 相比，assign() 方法也更受欢迎，因为它允许用户在测试时模拟函数并检查 URL 输入参数。

用法：

window.location.assign("https://geeksforgeeks.org/")

window.location.replace、window.location.assign 和 window.location.href 属性的区别：

举个 🌰：有3个页面 a,b,c

如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c

1：b->c 是通过window.location.replace(“..xx/c”) 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）

2：b->c是通过window.location.href(“..xx/c”) 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面

两者的区别: 两者后退时所回退的页面不一样