VueRouter的两种模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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. 标签<a>的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事件监听，刷新页面才会向服务器发起请求。