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

     



     



     



     

、再次调试

     


     


     


     
，刷新后依旧没问题