路由

前端电脑-PC-桌面端-计算机

梗概:

前端的路由指: 根据不同的 URL 地址展示不同的UI, 并且不用刷新整个页面

1. 后端的路由:

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

前端原生的两种路由原理:

1. hash模式:

1.1. 适用范围:

优点:

1. 完全前端路由，只改变#后面的值，无刷新。
   1. 无需服务端配合处理非单页的url地址。
2. 兼容性好，可以兼容到IE8

缺点:

1. SEO不友好，看起来丑，会导致URL 锚点 hash fragment失效。

特点:

3. 相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

1.2. 梗概:

1. 监测客户端URL的URL 锚点 hash fragment值变化
2. 获取当前hash值
   1. child::访问浏览器的hash值
3. 做出响应

2. history模式:

2.1. 适用范围:

优点：

1. 在同源（需要后端服务器的配合，将所有前端路由渲染至一个页面）的情况下，实现了前端完全自由.
2. stateObject可以是任何数据类型，URL可以是相对路径也可以是绝对路径。

缺点：

1. 如果后端没有做对应的路由，在刷新时会出现404。
   1. 因为更新了URL, 但是并没有实际发送新的URL给服务端, 如果刷新, 就会发送当前URL给服务端
      1. 如果当前URL在后端并不存在, 则返回404
2. IE8以下不支持。

2.2. 梗概:

1. 浏览器具有记录浏览历史的功能
2. 点击按钮时, 按钮执行api: pushState()或replaceState(), 将新的URL代替当前URL
   1. 或者是用户操作浏览历史, 触发popState事件的监听器
3. 通过bom api, 获取当前URL地址
4. 根据对应URL, 做出不同响应

针对路由的组件设计

child::针对路由的组件设计