工作中遇见的跳转问题.......

一、window.location.href()和window.history.pushState()的区别？
window.location.href
window.location.href 是 Location 对象的一个属性，它返回或设置当前文档的URL。

用途

页面跳转: 当你设置 window.location.href 时，浏览器会导航到指定的URL，并重新加载页面。
获取当前URL: 当你读取 window.location.href 时，它会返回当前页面的完整URL。
// 设置新的URL
window.location.href = ‘https://example.com/new-page’;

// 获取当前URL
const currentUrl = window.location.href;

window.history.pushState()
window.history.pushState() 是 HTML5 History API 的一部分，它允许你向浏览器的历史记录栈中添加一个新的条目，而不会实际发送请求到服务器。
用途
页面状态管理: 在单页面应用中，你可以使用 pushState 来更新URL，而不会导致页面重新加载。
URL更新: 改变地址栏中的URL，使用户能够使用浏览器的前进和后退按钮。
// 添加一个新的历史记录条目
window.history.pushState({ key: ‘value’ }, ‘Title’, ‘/new-url’);
主要区别
页面刷新:
pushState: 不会导致页面刷新。
location.href: 会导致页面刷新，并且会向服务器发送一个请求。
历史记录:
pushState: 向历史记录栈添加一个新的条目。
location.href: 也会向历史记录栈添加一个新的条目，但在某些情况下可能会替换当前条目。
服务器请求:
pushState: 不会触发服务器请求。
location.href: 会触发服务器请求。
事件监听:
pushState: 可以监听 popstate 事件来检测用户使用浏览器的前进/后退按钮。
location.href: 没有专门的事件来监听，但可以通过观察 location 对象的变化来实现类似的功能。
示例
使用 pushState:
// 添加一个新的历史记录条目
window.history.pushState({ page: 2 }, “Title”, “/page2”);
使用 location.href:
// 导航到一个新的页面
window.location.href = “/page2”;
总结
如果你需要在不刷新页面的情况下改变URL，并且希望保留当前页面的状态，那么 pushState 是更好的选择。
如果你需要导航到一个新的页面，那么应该使用 location.href。