前端小技巧｜history.pushState()让你告别页面跳转的尴尬 🤫
姐妹们！👋 还记得之前跟你们说的，要学习一些前端的小技巧，这样才能在朋友圈、微博里，用更酷炫的方式展现自己。今天就来分享一个超实用的技巧：history.pushState()，它能让你在网页中实现无刷新跳转，告别页面跳转带来的加载等待和卡顿，简直是网页交互的“魔法师” ✨
以前呢，我们想要实现页面跳转，通常都是用 标签或者 location.href 来直接跳转，这样就会造成页面的重新加载，体验很不好。😩 比如你在浏览一个电商网站，想从商品列表页面跳转到商品详情页面，就会出现一个白屏，然后再加载详情页的内容。
但是现在有了 history.pushState() 方法，就可以轻松实现无刷新跳转！🤩 它可以将新的页面内容添加到浏览器的历史记录中，并且不会触发页面重新加载，而是直接将内容替换到当前页面。
举个栗子🌰： 假设你在看一个博主的文章，文章中有很多图片，当你点击图片想要查看大图时，就可以用 history.pushState() 方法将大图内容添加到浏览器的历史记录中，并且直接将大图显示在当前页面，无需重新加载，是不是很神奇？
怎么使用 history.pushState()？ 其实很简单，它接受三个参数：
1. state 对象: 你可以在这里存储一些需要传递给新页面的数据，比如商品的 ID，图片的 URL 等等。
2. title: 用于设置新页面的
3. url: 用于设置新页面的 URL，这个 URL 只是用于显示在地址栏中，不会真正跳转到这个页面。
代码示例：
js
// 假设我们要跳转到一个新的页面，并且传递一个商品的 ID
history.pushState({ id: 123 }, '商品详情页', '/product/detail?id=123');
// 在新页面中，我们可以通过 window.history.state 获取传递过来的数据
console.log(window.history.state); // { id: 123 }
注意： history.pushState() 只能修改浏览器的历史记录，并不能直接修改页面内容。如果你需要修改页面内容，还需要使用 JavaScript 动态修改 DOM。
history.pushState() 还有很多其他的用途，比如：
实现单页面应用 (SPA) 的路由功能。
模拟页面跳转，实现一些动画效果。
通过 AJAX 加载内容，然后更新页面内容，同时修改浏览器的历史记录。
history.pushState() 是一个非常强大的方法，可以帮助我们实现很多酷炫的网页交互效果。
相信你学会了这个方法之后，一定会对你的网页设计带来不少的帮助！ 😉
你最想用 history.pushState() 实现什么效果呢？欢迎评论区分享你的想法！