路由的hash和history都是前端路由实现的方式,它们的实现方式和原理略有不同。
实现方式:
● hash方式:通过修改URL中的hash值来实现路由的变化。比如www.example.com/#/home,其中#/home就是hash部分,浏览器不会重新请求服务器,而是根据hash值的变化,前端进行路由跳转。
● history方式:通过HTML5中新增的pushState和replaceState方法,修改浏览器地址栏中的URL,同时将新的URL存入浏览器历史记录中,从而实现前端路由。在history模式下,前端路由跳转后会向服务器发送请求,服务器会返回对应的HTML,所以在使用history模式时需要服务器进行配置,确保在请求时返回正确的HTML。
区别:
● URL格式不同:hash模式下,URL中以#号开头,后面是路由地址;history模式下,URL是完整的路由地址。
● 是否发送请求:hash模式下,前端路由跳转不会向服务器发送请求;history模式下,前端路由跳转会向服务器发送请求。
● 后退按钮表现不同:hash模式下,浏览器的后退按钮会返回到前一个hash路由地址;history模式下,浏览器的后退按钮会返回到前一个完整的路由地址。
在实际开发中,我们可以根据项目需要来选择使用哪种路由方式。如果需要与服务器交互或者有SEO需求,可以使用history模式;如果只是单纯的前端路由跳转,可以使用hash模式。