使用window.history.pushstate前后端路由网页

使用window.history.pushstate可以改变浏览器的URL地址，同时不会刷新页面。这让我们可以更好的控制网页的路由，改变路由时，不会重新加载整个页面，使用户体验更加流畅。

前后端路由

对于传统的网页，每次打开页面或者点击链接时，都会向服务器请求一次资源，这就导致了界面的重新加载，同时页面状态也会丧失。现在越来越多的网站采用前后端分离技术，前端采用Ajax异步请求资源，服务器返回JSON格式的数据。前端拿到数据后，根据数据动态生成页面，这就是前后端路由。

pushState方法

语法

history.pushState(stateObject, title, url);

• stateObject：一个JavaScript对象，可以保存一些数据，用于后续页面的状态恢复。
• title：网页的标题。
• url：改变后的URL地址。

示例

history.pushState({ name: 'homepage' }, 'homepage', '/homepage');

这样就改变了当前网页的URL地址，同时还将{name: 'homepage'}存储到历史记录中，这样，即使用户刷新了页面，也可以使用history.state方法取出这个值。

监听popstate事件

使用pushState改变URL地址不会触发页面的刷新，这就是前端路由的实现方式。但是，如果用户点击浏览器的后退、前进按钮，会触发popstate事件，这个事件的event对象中包含了当前的历史记录对象，我们可以根据这个对象，进行不同的操作（例如：重新生成页面）。

示例

window.addEventListener('popstate', function (event) {
  console.log(event.state);
  // TODO: 做一些路由处理的操作
});

结论

前端路由已经成为现代SPA的一个关键技术，可以增加网站的用户体验，缩短页面切换时间，同时可以提高站点SEO，更便于搜索引擎收录。推荐使用window.history.pushstate方法和popstate事件来动态修改网站的URL地址。