认识路由及其实现的两种方法14

认识路由

路由（网络工程术语），指通过互联的网络把信息从原地址传输到目的地址的活动。

生活中常见的，路由器。路由器有两种机制：路由、转送。

• 路由：决定数据包从来源到目的地的路径。
• 转送：将输入端的数据转移到合适的输出端。
• 补充：
  • 家中牵网线：运营商牵线到家中的猫，猫连接路由器。
  • 猫的ip是公网ip（形如202.111.23.45）。互联网中ip地址是唯一的指公网ip。
  • 路由器ip是内网ip（形如192.168.1.10），内网ip只在当前所在网络中有效。
  • 路由表：本质是一个映射表，决定数据包的指向。内网ip与电脑mac地址（电脑标识）一一对应，即内网ip与每个设备分配的地址对应，形如
    [
    内网ip1—电脑标识1
    内网ip2—电脑标识2
    ……
    ]
    A给B发送消息，通过目的地址的公网ip找到对应的猫连接的路由器，路由器再根据路由表中的电脑标识（电脑的mac地址）找到对应的内网ip，将信息转送给B。

后端路由、前后端分离、前端路由

1、后端路由

早期网页开发一般运用的技术：html+css+jsp（java serve page）。

用户在页面中请求不同的路径内容时，交给服务器处理。由服务器渲染好对应url的整个页面，之后返回给客户端进行展示。即：后端处理URL和页面之间的映射关系。

过程：

• 每一个页面对应一个url。
• url发送到服务器，服务器通过正则等方法对url进行匹配，之后交给Controller进行处理。
  • controller处理完后，生成html和数据，返回给浏览器。

优点：

• 渲染好的页面直接由浏览器展示，不需要单独加载任何的css等文件；
• 有利于SEO的优化。（Search Engine Optimization，是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。）

缺点：

• 整个页面的模块都需要由后端人员来编写和维护 或 前端人员开发页面需要通过java或php来编写代码。
• 通常html代码和数据以及对应的逻辑会混在一起，不利于编写和维护。

2、前后端分离

重点：Ajax

• ajax的诞生，出现了前后端分离的开发模式；

过程：

后端只提供Api返回数据。前端通过ajax获取数据，并通过js将数据渲染到页面中。

• 用户在浏览器中输入url
• **静态资源服务器（包含多套html、css、js）**接收并解析获取的url，拿取对应的html+css+js由浏览器渲染执行
• 浏览器发送ajax请求到提供Api接口的服务器
• 服务器传送大量数据到浏览器进行渲染
• 浏览器将接收到的数据展示在页面中

优点：

• 前后端工作分配明晰，后端专注数据，前端注重交互与可视化。
• PC端和移动端（IOS/Android）可以使用一套API，后端不需要进行其他处理。

3、前端路由

把不同路由对应不同的内容或页面的任务交给前端。

单页面富应用阶段
SPA（single page web application）：单页Web应用。

• 加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
• 主要特点：
  • 只有一个html页面。
  • 在前后端分离的基础上加了一层前端路由。

核心：

• 改变url，但页面不进行整体的刷新。

过程：

• 前端通过hash函数或History API，将路径与相应的组件映射起来。
• 用户在浏览器输入url
• 前端自动监听，发现url改变后，去抽取js文件，把与url对应的组件直接从下载好的资源中抽离出来（之前已经将html、css、js全部下载到浏览器，故不会向服务器请求资源），前端渲染之后展示在浏览器上。

优点：

• 页面刷新速度快，不需要服务器来进行解析
• 复用性强，html、css、js文件都可以共用
• 页面状态可记录。

前端路由的实现

改变URL的hash

url的hash，即锚点#。

• 改变url的hash，本质是改变window.location的href属性内容。
• 可通过改变location.hash改变href，但页面不刷新

location.hash=‘xxx’
路由映射：找到url对应的组件渲染在浏览器上，页面不刷新。

修改HTML5的history

history接口，五种模式改变url，但不刷新页面

go、forward、back等同于浏览器控制页面前进后退的按钮

1、pushState，入栈，返回当前url

history.pushState({},'','/xxx')

页面未刷新

2、replaceState，替代当前url，返回新的url，且无法回退到上一个历史界面

history.replace({},'','/xxx')

3、back，返回下一个url

history.back()

4、forward，返回上一个url

5、go，以当前位置为基准，返回上/下第n个

history.go(n)
history.go(1)等同于history.forward()
history.go(-1)等同于history.back()

栈空间