47. VUE-路由是什么？如何实现页面不请求刷新？

路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科

路由器提供了两种机制:

路由和转送. 

路由是决定数据包从来源到目的地的路径. 

转送将输入端的数据转移到合适的输出端.

 

生活中的路由：

路由中有一个非常重要的概念叫路由表. 

路由表本质上就是一个映射表, 决定了数据包的指向.

 唯一公网IP  -》  猫  - 》  路由-》 分配内网IP\

 

---

前端路由阶段：

随着Ajax的出现, 有了前后端分离的开发模式，后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中，最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上。

单页面富应用阶段:

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.　　也就是前端来维护一套路由规则.

前端路由的核心是 改变URL，但是页面不进行整体的刷新，使用不请求不刷新，抽取思想进行更新页面。

简单说： 请求下载好html+css+js 。 然后实现不不请求刷新，数据也是从html+css+js 中抽取，抽自己要的，，，这些映射是路由来管理。

---

如何实现不请求刷新页面：

1.URL的hash：其实就是锚点，本质上是改变window.location的href属性，我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新：

 

 

 然后你网址就多了一个 #/　　其实就是 加了个#号 然后后面跟网址，，，，这就是普通的锚点

 

2.H5中的 pushState方法：

 

 

 这个方法其实就是对 历史记录进行更改，网址会直接增加/xxx ，其次 他有三个参数 最后那个是家加网址，这个有一个缺点 就是可以   前进 / 后退， 因为这类似压栈。(back、go 等方法进行前进、后退都可以。)

3. H5中的  replaceState方法：

 

 

  

这个和 pushState 一样的，但是呢 这个不具有前进和后退功能，就是所 浏览器不会保存你的记录，直接覆盖掉嘛，replace 是覆盖的意思。