路由向html发送信息,Vue方向：对前端路由以及后端路由的理解

1、路由

路由：简而言之，就是把信息从原地址传输到目的地的活动

对于我们来说就是：根据不同的URL地址展示不同的页面

代码

1.1、前端路由

前端路由是指通过一定的技术手段，在跳转路由时不在向服务器发送请求，而在浏览器端进行处理

通过不同的url映射到页面不同的DOM元素，不同的URL显示不同的页面内容

1.2、后端路由

改变url地址时，浏览器会向服务器发送请求，服务器根据这个url，返回不同的资源内容

后端路由的特点就是：

1.  前端每次跳转到不同的url地址，都会重新访问服务器

2.  服务器根据前端的路由，返回不同的数据，或者HTML页面

总结：

1：后端路由是URL地址映射到服务器上的某些资源

2：前端路由是URL地址映射到浏览器上的某些资源

2、单页面应用

在开发单页面应用时，会经常使用到前端路由

单页面的说明：

1.  单页面是指整个项目只有一个页面，页面显示的内容被抽离为一个一个小的组件

2.  通过前端路由，让URL地址的改变来映射到不同的组件，通过URL的改变来决定组件的显示与否

单页面开发的优缺点：优点：用户体验好

1. 单页面只有一个页面，在第一次加载时，就已经将所有资源从服务器上下载

2.  在通过前端路由切换页面时，不是像服务器发送的请求，只是通过url决定哪些资源显示

3.  因为不用向服务器发送请求，所以请求/响应造成的等待时间就会大大减少，提高了响应速度

缺点：

1.  不利于SEO优化(单页面只有一个页面会被百度收录，其他页面都是虚拟的)

2.  使用浏览器的前后退键的时候会重新发请求，没有合理的利用缓存

3.  单页面无法记住之前滚动条的位置,无法在前进,后退的时候记住滚动的位置

3、前端渲染

前端渲染也称客户端渲染

前端渲染说明：

1.  前端渲染是指浏览器将页面模板和数据进行组合形式形成最终的HTML页面

2.  原理就是浏览器通过URL获取服务器页面模板，服务器并不需要消化太多资源，直接将页面模板发送给前端

3.  浏览器拿到页面后，在解析页面的同时，通过页面中的ajax向后端请求数据

4.  服务器根据前端对于数据的请求，返回给前端数据

5.  浏览器拿到数据以后在和页面模板整合，形成最终的页面

前端渲染的好处:

1.  网络传输数据量小,因为一个完整的页面是通过两次请求获取的

2.  模板在前端,因此可以通过请求不同的数据改变页面显示结果

3.  进而减少后端渲染时,每次请求都会返回模板解析后的结果

4.  不占用服务器资源

前端渲染的劣势：

1.  前端资源消耗较多，因为模板的解析和数据的处理都是需要前端来处理

2.  对于SEO优化不是特别的友好，因为搜索引擎蜘蛛获取的是页面模板，没法分析页面的全部内容

4、前端路由实现的技术

4.1  基于hash实现的前端路由

在html和css的阶段，就已经使用hash来处理页面的锚点，因此hash的改变，url不会向服务器发送请求，这就是用来前端路由的一种技术手段，

会发现页面的路径虽然发生改变,但是浏览器并未向服务器发送请求,也没有刷新页面。

4.1.1  hash的说明：

1.  hash就是完整的url地址(也就是说就是#后面的那一串内容)

2.  Web服务不会解析hash，因为hash仅仅是客户端的一个状态

3.  反而前端可以在js中通过window.location.hash来读取到

4.  前端在读取到hash以后，就可以通过hash所代表的不同路径处理页面不同的显示逻辑

4.1.2  hash的特点：

1.  hash能兼容低版本的浏览器

2.  hash值的改变，不会向服务器发送请求，hash改变的值，只会在浏览器的访问历史中增加记录

3.  因此可以通过浏览器的前进，后退按钮切换hash值

4.2  基于HTML新增的history API实现的前端路由

HTML新增了history API，来操作浏览器的路由地址，浏览器会提供一个history的对象，用来保存用户操作的历史

4.2.1  history的说明：

1.  因为浏览器窗口提供了history来保存历史操作的url

2.  因此使用前进后退按钮时，url地址会发生变化，但不会向服务器发送请求

3.  但是history里保存的历史记录都是访问过的路由

4.  只需要一定的api ，将一些url路由添加到history历史记录中就可以实现不发送请求的路由跳转

5.  需借助history的API 进行操作

4.2.2  history  API

1.  history.pushState：向history对象中添加一条历史记录

2.  history.replaceState：替换掉当前的history记录

3.  两个方法都接受三个参数，分别为state，title，url

4.2.3  pushState和replaceState参数

1. state用来存放将要插入的history实体的相关信息，它是一个json格式的参数

2. title就是传入history实体的标题

3.  url用来传递新的history实体的相对路径

history提供的这两个方法不会主动触发浏览器页面的刷新，只是history对象包括地址栏的内容会发生改变，当触发前进后退的history事件时才会进行相应的响应操作。