h5 history模式是什么

H5 History模式是一种前端路由的实现方式，与Hash模式不同，它利用了HTML5的history API，通过在真实url后面拼接“/”来实现路由的路径。在这种模式下，当“/”后的路径发生变化时，浏览器会重新发起请求，而不是触发onhashchange事件。通过这种方式，可以实现无刷新跳转的功能。

以下是一个使用HTML5 History API实现前端路由的简单例子：

 
 
 
   
 
 
 

 
   
• Home
 
   
• About
 
   
• Contact
 
 

 
  
 

 
  
   
 

在这个例子中，我们使用了HTML5的History API中的history.pushState()方法来修改浏览器的地址栏显示的URL，但不刷新页面。当用户点击导航链接时，会调用navigateTo()函数，将新的路由传递给handleRoute()函数处理，并显示对应的内容。同时，我们还监听了浏览器的前进后退按钮事件，当用户点击这些按钮时，会触发popstate事件，然后调用handleRoute()函数处理路由变化，并显示对应的内容。