前端路由之变化url不发送请求

什么是路由？为什么要有前端路由？

首先，域名的组成：http://（协议）www.（子域名）abc.com（主域名）:8080（端口号）/a/b（请求资源地址）。其中路径为  "/a/b"，在web服务器中，把请求路径交给对应的处理逻辑去处理，这就是[路由分发]，这就是路由做的事。

以前，路由工作都是由后端做，通过用户请求的url导航到具体的html资源文件来展示不同的页面。

导致，前端开发中的痛点：

一、我们在开发翻页看评论时，有两种方式，点击下一页，1、ajax post请求请求到下一页数据展示出来，他的优点是能不刷新页面更新数据，但不能记录页面位置，分享给别人或者自己刷新都会回到第一页。2、ajax get请求到下一页数据会把?page=n+1,记录在url中，它的优点是能记录翻页位置 刷新页面不会回到第1页，但每次翻页都会刷新页面。

        其实就是能否在不刷新页面情况下，前端js能动态监听到url变化，根据不同url发送异步请求更新页面内容的问题。

二、后端路由每访问一个新页面都要向服务端发送请求，然后服务端再响应请求刷新页面，这个过程会有延迟，用户体验不好。

        两者总结一下就是希望，（主要）1、页面跳转不用异步请求来刷新页面，我们前端直接能做到，省时。（一些场景做不到）2、在只能用url记录页面状态的场景下(如分享)，能不刷新页面就监听到url变化对视图做一些操作(如翻页)，场景就是分享＋翻页。

但是，我们 既想不刷新页面又能记录当前翻页状态 且 访问新页面时只变化路径提升用户体验。所以我们前端需要自己来操纵路由，操纵路由就做到 改变url的同时 浏览器不向服务器发送请求。

能做到这点的有两个人，html5手下的history(html5特性,部分浏览器不支持)和url手下的hash(url中有#，对SEO不友好)。

history有3样武器，history.pushState(stateObject, title, url)、history.replaceState()、window.onpopstate 分别能够在浏览器history对象中偷偷的生成一条新的历史记录(不发送请求)，替换一条历史记录(不发送请求)，当前进后退history到前两者的留下的历史记录时做出反应。

hash我们可能不熟，但他的另外一个名字(锚)大家都应该熟悉，location.hash即返回url中#后面的部分。平时我们用它来做锚链接(<a href="#aa"></a>, <p name="aa" id="aa"></p>) 跳到页面相应位置。此外，它还有一个不为人知的功能就是 改变url的锚链接，页面不会发生跳转，且onhashchange可以监听hash变化，这正是我们需要的。

选谁？我们需要对这两个人做一下比较分析。

1、history的pushState()偷偷设置的url必须是与当前url同源的(同 协议/子域名/主域名/端口号，不然可以假冒淘宝url，有危害)，不刷新情况下也是同文档的；hash只能修改#后面的部分,因此只能设置与当前url同文档的url。这点对于我们来说实际作用差别不大。

2、history的pushState() 设置的新 url 可以与当前url 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。不太重要。

3、history的pushState() 可以通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串。用到不多。

4、url的hash, 仅 hash 符号之前的内容会被包含在请求中，无论如何改变hash都不会请求页面；history的pushState() 是需要后端配合的，因为 用户手动刷新页面或者手动修改url跳转页面(都会请求页面)是会报404错误的。这点挺有用。

5、history的pushState() 比url的hash（＃）要美观。

6、history api 支持 ie 10+ ；url的hash 支持 ie 8+。浏览器兼容性。

概括一下主要区别：1、history比hash兼容性好。2、history当用户修改或手动刷新url时会发送真实请求，需要后端配合，在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面(app依赖的index页面)。这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面作为警告。hash没有这个状况。3、hash导致url中的"#"对SEO不友好。4、history比hash，url更美观。

大家觉得自己的项目 适合哪个？

但是，history api和 hash 只是做到了变化路由 不发送页面请求，那么如何把路由和相应模版数据对应起来，vue-router有一个构造函数Router，实例化Router通过它把路由和模版数据对应起来，再绑定在vue实例上。

接下来我们会继续介绍 如何把路由和相应模版数据对应起来？