森泥.酷哦

加油,小可耐!

前端路由原理

框架 0 评 107 度

前端路由

hash 模式

https://www.baidu.com#index

location.hash = #index

hash 特性:

  • URLhash 值只是客户端的一种状态,当向服务器端发出请求时,hash 部分不会被发送。
  • hash 值的改变,会在浏览器的访问历史中增加一个记录,能通过浏览器的回退、前进按钮控制hash 的切换。
  • hashchange 事件监听 hash 的变化。

history模式

history 特性:

  • pushStaterepalceState 的标题(title):一般浏览器会忽略 ;
  • 使用 popstate 事件来监听 url 的变化;
  • history.pushState()history.replaceState() 不会触发 popstate 事件

前端路由原理解析和实现

从源码看watch属性的实现