Hash路由和History路由
路由原理
为了实现单页面应用,需要实现 改变视图和URL 而不向后端发起请求,
浏览器提供了两套不同的API支持,也就是 hash 和 history,
而无论 vue 还是 react, Hash 还是 History,
单页面应用的路由实现原理分为两大块 调用浏览器API修改地址栏URL 和 监听浏览器URL变更触发事件
一些思考
得益于浏览器这个中间人的存在,实现了发布订阅模式,
router的 修改URL 和 监听URL 二者的实现完全解耦,
修改URL的部分不关注URL变化之后会发生什么,只关注如何修改URL,
监听URL的部分也不关注是谁(用户或是API)修改的URL,只关注URL变更后的组件调度实现。
优缺点
history优点:
支持前进后退按钮
URL更自然
SEO友好
history缺点:
需要后端配合
history模式的路由实际由前端管理,但浏览器发起后端页面请求时,会将整个路由传给后端,后端自然不存在这些二级路由
因此会出现404错误,解决方案是后端配置nginx的url重定向,重定向到首页路由。
hash模式不会有这个问题,因为hash符号后的内容不会浏览器被发送给后端,但这也同时导致了其他问题。
hash路由缺点:
不支持前进后退按钮
hash路由变化不会被浏览器记录
URL不够直观
hash部分SEO不友好
hash路由优点:
设置简单
无需后端支持
浏览器兼容性好
无需HTML5的history接口