vue-router原理

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,

实现这一点主要是两种方式:

1.Hash: 通过改变hash值

2.History: 利用history对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）

 

而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

默认Hash-->如果浏览器支持History新特性改用History-->如果不在浏览器环境则使用abstract

选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

可见最被青睐的是History模式，理由是: "#"太丑了。。。

 

基本方法分析:

Hash

1.push()

功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

调用流程:

1 $router.push() //显式调用方法

2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）

3 History.transitionTo() //开始更新

4 History.updateRoute()  //更新路由

5 {app._route= route} 

6 vm.render() //更新视图

 

2.replace

功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址

流程与push基本一致

但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

 

3.监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

 

History

1.push

与hash模式类似，只是将window.hash改为history.pushState

2.replace

与hash模式类似，只是将window.replace改为history.replaceState

3.监听地址变化

在HTML5History的构造函数中监听popState（window.onpopstate）

 

两种模式对比

History模式的优点:

1.History模式的地址栏更美观。。。

2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档

3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据

4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）

缺点:

对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，

而不会重新请求页面。

但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样

Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题

History 例如:  xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

 

history新增方法

 

history对象包含用户访问过的URL，属于window对象的一部分，传统的使用中，它拥有length属性（浏览器历史列表URL数目）

及back()、forward()、go()方法。

 

而新的H5则赋予了其更多的新特性:

 

往返缓存

默认情况下,浏览器会缓存当前会话页面，这样当下一个页面点击后退按钮，或前一个页面点击前进按钮，浏览器便会从缓存中提取并加载此页面，这个特性被称为“往返缓存”。

备注: 此缓存会保留页面数据、DOM和js状态，实际上是将整个页面完好无缺地保留

------------沉默分割线-----------------------------------------------------------------------------------------------------------------------

pushState(state, title, url) 

往历史记录栈中添加记录

支持度: IE10+

state: 一个js对象，主要用于在popstate事件中作为参数被获取

title: 新页面的标题，部分浏览器(比如firefox)忽略此参数，因此一般为null

url: 新历史记录的地址，可为页面地址也可为一个锚点值，新url必须与当前url处于同一个域，否则将抛出异常，此参数若没有特别标注，会被设为当前文档url

实例:

假定当前网址是example.com/1.html，使用pushState方法在浏览记录(history对象)中添加一个新记录

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

浏览器地址栏将立即变成example.com/2.html，但并不会跳转到2.html，甚至不会检查2.html是否存在，也不会再popstate事件中获取，因为:这个方法仅仅是添加了一条最新记录，不会触发页面刷新

备注:

1.将url设为锚点值时不会触发hashchange

2.如果设置不同域名地址，会报错，这样做的目的是:防止用户以为它们是同一个网站，若没有此限制，将很容易进行XSS、CSRF等攻击方式

------------华丽分割线--------------------------------------------------------------------------------------------------------------------------

replaceState(state, title, url)

支持度: IE10+

参数与pushState一致，但其功能是改变当前的历史记录而不是添加新的记录。

同样不会触发popstate

------------璀璨分割线--------------------------------------------------------------------------------------------------------------------------

history.state

支持度: IE10+

返回当前历史记录的state

--------------曼妙分割线---------------------------------------------------------------------------------------------------------------------

popstate事件

支持度: IE10+

语法: window.onpopstate= function(event){

　　console.log(event.state) //当前历史记录的state对象

}//注意大小写

 

触发条件: 点击前进后退按钮、调用back()、forward()、go()

个人思考: 对于pushState、replaceState无法触发它，可以从语义上理解，pop有弹出、提取出的意味，是从历史记录栈中提取出来，而pushState、replaceState分别是压入栈和改变元素，自然不会触发。