什么是路由？路由分为哪两类？

提到路由，大家一般会想到生活中常见的路由器，路由器主要用于连接多个逻辑上分开的网络，逻辑网络代表-个单独的网络或者一个子网，可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引人了路由的概念，因此，我们先来对程序开发中的路由进行简单地了解。

程序开发中的路由分为后端路由和前端路由，下面我们分别进行简要介绍。

1. 后端路由

后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合生成最终的HTML页面。下图演示了后端路由的工作原理。

2. 前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。前端路由和后端路由的原理是类似的，但是实现的方式不一样。对于单页面应用(Single Page Application, SPA)来说，主要通过URL中的hash(#号)来实现不同页面之间的切换。hash有一个特点，就是HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash来实现。

下图演示了前端路由的工作原理。

在上图中，index.html 后面的‘#home”是hash方式的路由，由前端路由来处理，将hash值与页面中的组件对应，当hash值为“#/home” 时，就显示“首页”组件。前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。

前端路由机制

前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。

前端路由机制原理及两种实现方式

一、History

History 接口允许 *** 作浏览器的曾经在标签页或者框架里访问的会话历史记录。

用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象：

history 对象包含用户（在浏览器窗口）访问过的url

history对象是window对象的一部分，可以通过window.history属性进行访问。

基本的API用法如back、forward、go不做多解释，可以参考MDN

重点解释html5新增的API：

1、history.pushState（） //在history对象中添加一条新的浏览记录

2、History.replaceState() // 是替换history中的当前记录

3、history.state //是一个属性，可以得到当前页的state信息。

4、window.onpopstate //是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。

(和它相似的一个方法叫做onhashchange，onhashchange是老API, 浏览器支持度高, 本来是用来监

听hash变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate是专门用来监听浏览器

前进后退的, 不仅可以支持hash, 非hash的同源url也支持。)

history.pushState与History.replaceState的区别

history.pushState和History.replaceState都接收三个参数：即（data[,title][,url]）

状态对象（state Object）：一个object，与pushState方法创建的新历史记录条目关联。

标题：一般传null

地址（url）：新的历史记录条目的地址。

pushState和replaceState都会 *** 作浏览器的历史记录，并且不会引起页面的刷新。

不同之处在与：一个新增，一个替换。

History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美观

一、hash

我们经常看到在url中出现#符号，这个在路由中出现的#，叫做hash，很多大型框架的路由系统都是由hash实现的。

上面提到一个方法onhashchange事件，用来监听hash变化，也可以被利用来做客户端前进和后退事件的监听。

区别在于express是服务器端的路由，也就是说需要向后台服务器发送请求，然后服务器来决定来render那个.html，这也就是最早的mvc架构模式，而前端的路由是将这一过程放在浏览器端，也就是前台写js代码控制，不在请求服务器，前台一般利用histroy和hash来控制，达到不刷新页面可以使显示内容发生变化，这样好处是js代码不发生变化(浏览器端可以维护一个稳定的model)；一般单页应用就是前台来控制路由，这样速度更快，用户体验更好。单页应用还将模板拿到了浏览器端，从而解放了服务端，服务端趋于服务化。

---