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 是覆盖的意思。

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15127841.html

原文地址:https://www.cnblogs.com/bi-hu/p/15127841.html