history.pushstate()怎么用

history.pushstate()是一种JavaScript方法，它允许在当前历史记录中创建新的条目，从而实现动态更新URL和页面内容的技术。它可以用于创建单页应用程序以及实现带有历史路由的Web应用程序。

相关问题

history.pushState

`history.pushState` 是 HTML5 新增的 API，用于在浏览器历史记录中添加一条新的记录。

它接收三个参数：

1. state：一个与新记录相关联的状态对象。
2. title：新记录的标题，目前大多数浏览器不使用该参数。
3. url：新记录的 URL。

使用 `pushState` 后，虽然浏览器地址栏中的 URL 发生了改变，但实际上并不会向服务器发送请求，也不会刷新页面。这意味着可以使用 JavaScript 更改浏览器地址栏中的 URL，同时更新页面内容，从而实现单页应用（SPA）的效果。

需要注意的是，使用 `pushState` 后，浏览器的前进和后退按钮仍然可以控制历史记录，同时也可以通过 JavaScript 调用 `history.back()` 和 `history.forward()` 方法来进行相应操作。

history.pushstate

hash模式和history模式是vue-router中两种常用的路由模式。hash模式使用URL的hash部分来模拟完整的URL，即将路由信息添加到URL的#后面，例如：http://example.com/#/home。而history模式使用HTML5的history API来实现路由功能，它可以使URL看起来更加清晰、美观，没有#符号，例如：http://example.com/home。

区别如下：
1. URL形式：hash模式使用URL的hash部分来模拟完整的URL，而history模式使用HTML5的history API来实现路由，使URL更加直观、清晰。
2. 兼容性：hash模式在各种浏览器和服务器环境下都能良好运行，而history模式需要服务器端的支持，否则在刷新页面时会出现404错误。
3. URL美观性：history模式的URL更加美观，没有#符号，更符合传统的URL格式；而hash模式的URL可能会显得稍微有些丑陋。
4. 开发调试：hash模式下，前端开发和调试更加方便，因为任意路由切换都不需要后端的支持；而history模式下，前端开发需要后端的支持来处理路由的跳转。

总的来说，hash模式适合在不需要服务器端支持的情况下进行前端开发和调试，而history模式则适合在服务器环境支持的情况下，使URL更加直观美观。<span class="em">1</span><span class="em">2</span><span class="em">3</span>