VueRouter的两种模式

前后端分离：利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。

前端路由：匹配不同的url路径，进行解析，加载不同组件，动态渲染内容，不会向后端发出请求。（VueRouter）

单页应用SPA（只有一个html文件），页面交互和页面刷新都是无刷新的。前后端分离+前端路由来实现。

VueRouter有两种模式：Hash模式、History模式，默认是Hash模式，可以通过mode属性进行设置。

mode	history对象创建依据的类
hash	new HashHistory(this, options.base, this.fallback)
history	​​​​​​​new HTML5History(this, options.base)
abstract	new AbstractHistory(this, options.base)

一、Hash模式

Hash模式是VueRouter的默认模式，工作原理是利用hashchange事件监听hash的变化，即#xxx，然后通过。可以在window对象上监听这个事件。

window.onhashchange = function(event){
  // event.oldURL 表示原来的URL，有#则含#及其后字符串
  // event.newURL 表示现在的URL，有#则含#及其后字符串
}

HashHistory构造函数：

HashHistory.push() // 将新路由添加到浏览器历史访问栈

HashHistory.replace() // 将浏览器历史访问栈栈顶路由替换成新路由

由于hash变化的URL都被记录在浏览器历史访问栈，尽管浏览器没有访问服务器，但页面内容和URL一一对应，可以使用浏览器的前进和后退功能。

触发hashchange事件的几种情况如下：

1. 浏览器的前进、后退操作会触发window.location.hash的变化，从而触发hashchange事件。

2. 当只改变浏览器地址栏URL的哈希值，此时回车，浏览器不会发送任何请求给服务器，只会触发hashchange事件。

3. 当在浏览器地址栏URL中输入一个包含hash的url，此时回车，浏览器会发送除hash外的地址请求给服务器，请求完成，设置hash值，触发hashchange事件。

4. 标签的href属性可以设置为页面某元素的ID（如#top），点击跳转到该ID元素所在区域，同时浏览器自动设置window.location.hash属性，地址中的hash也会变化成其ID（如#top），触发hashchange事件。

二、History模式

Hash模式的缺点：

1. hash本来用于做页面定位，若用来做路由，原锚点公共失效。

2. Hash模式的传参基于url，若有复杂的数据会有体积的限制。History模式除了可以利用url传参，还可以将数据存放一个特定的对象中。

3. 路径书写不简约。

History模式的书写更加简洁，去掉#。充分利用HTML5 History Interface中新增的pushState()和replaceState()方法，这俩个方法应用于浏览器的历史记录栈（window.history指向History对象，表示当前窗口的浏览历史），使得不刷新页面改变url地址。在已有的back()、forward()、go()（接受一个整数作为参数，若参数超过实际存在的网址范围，该范围无效果；若不指定参数，默认参数为0，相当于刷新页面）的基础上，提供了对历史记录修改的功能。

前进和后退操作时都不会请求服务器，而是通过popstate事件监听，刷新页面才会向服务器发起请求。

2.1 History.pushSate()

用于在浏览器历史访问栈中添加一条记录，该方法不会刷新页面，只是导致History对象发生变化，地址栏会发生变化。使用该方法后，可以用History.state读出状态对象。

History.pushSate(object, title, url)

object：一个对象，通过pushState方法可以将该对象内容传递到新页面中，若不需要，填null。

title：标题，几乎没有浏览器支持该参数，传一个空字符串。

url：新的网站，需与当前页面处于同一个域。不指定默认为当前地址。若设置跨域地址，会报错。

若在url中设置#xxx，不会触发hashchange事件。

2.2 History.replaceSate()

用于修改History对象的当前记录，用法同History.pushSate(object, title, url)。

2.3 popstate事件

仅仅调用pushSate()或replaceState()方法，不会触发该事件。

只有用户点击浏览器前进和后退，或使用脚本调用history.back()、history.forward()、history.go()方法才会触发popstate事件。

该事件仅针对同一个文档，若浏览历史的切换，导致加载不同的文档，该事件也不会触发。

第一次加载不会触发popstate事件。

其回调函数的参数为event对象，state属性指向pushSate()和replaceState()方法提供的History的当前对象，也可以通过history.state获得该对象。

---

当页面刷新时，需要向服务器发起请求。History模式的url会全部传给服务器，即服务器需要匹配完成的URL，否则报404错误，需要后端配置路由。Hash模式的url的哈希值不会携带在请求中。

三、使用路由模块实现页面跳转的方式

1. 修改地址栏

2. this.$router.push('路由地址')

3.

四、Hash模式和History模式的相同点和不同点

相同点：

1. 都是VueRouter的模式配置选项。

2. 都可以用作SPA（单页面应用）的实现，实现前端路由，不向服务器发起请求，动态渲染页面。

不同点：

1. Hash模式需要#xxx（哈希值），History模式书写更简约。

2. Hash模式是通过window对象监听hashchange事件，根据hash值的变化来动态渲染页面的；History模式是通过window对象监听popstate事件，当浏览器前进和后退时，获取当前history对象状态即history.state来动态渲染组件。

3. Hash模式创建history对象是依赖HashHistory构造函数；History模式创建history对象是依赖HTML5History构造函数。

Hash模式利用HashHistory.push()和HashHistory.replace()可以将hash变化的URL都被记录在浏览器历史访问栈，实现页面内容和URL一一对应，从而可以使用浏览器的前进和后退功能。

History模式利用HTML5History.pushState()和HTML5History.replaceState()修改页面的url地址，修改history对象的状态，而不刷新页面。

4. Hash模式通过携带在url中传递参数；History模式既可以通过携带在url中传递参数，也可以将数据存放在一个特定的对象中。

5. Hash模式只有hash值设置为不同于上次时，才会被添加进历史记录栈；History模式可以记录相同的url。

6. Hash模式只能修改#之后的部分；History模式的pushState设置的新的url可以是于当前url同源的任意url。