he has history（关于hash和history的区别和使用）

一  
    
    
    
    
、区别

1

     


     


     


     


  、 history和hash都是利用浏览器的两种特性实现前端路由  
    
    
    
    
，history是利用浏览历史记录栈的API实现

     


     


     


     


  ，hash是监听location对象hash值变化事件来实现

2 




 




 




 




 
、 history的url没有’#号 




 




 




 




 
，hash反之

3  

   

   

   

   

、 相同的url  

   

   

   

   

，history会触发添加到浏览器历史记录栈中

     

     

     

     

 ，hash不会触发  




  




  




  




  ，history需要后端配合  


  


  


  


  


，如果后端不配合刷新新页面会出现404
     
     
     
     
，hash不需要

4

     

     

     

     

 、

HashRouter的原理：通过window.onhashchange方法获取新URL中hash值
   




   




   




   




   ，再做进一步处理 HistoryRouter的原理：通过history.pushState 使用它做页面跳转不会触发页面刷新 



 



 



 



 


，使用window.onpopstate 监听浏览器的前进和后退                     ，再做其他处理

二  




  




  




  




  、使用

举例说明history模式

1  


  


  


  


  


、现有一个这样的页面（Vue2）

2
     
     
     
     
、设置路由模式

3
   




   




   




   




   、打包

使用webpack的npm build命令

    




    




    




    




   ，生成以下文件

4 



 



 



 



 


、模拟一个服务器（nodejs的express）

初始化

调试

5                     、把打包好的文件放到服务器

6

    




    




    




    




   、访问






















，路由跳转不涉及网络请求

7






















、刷新页面                      ，资源请求失败

     



     



     



     



   ，发送网络请求/MyHome/message/details/1/message001失败





















，因为服务器上没有这个请求（history模式存在这个问题  
    
    
    
    
，hash模式则无）

8                      、解决办法

使用connect-history,根据npm官方文档

9

     



     



     



     



   、再次调试

     


     


     


     


  ，刷新后依旧没问题