vue-router实现原理

近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据本身理解，来记录下。
咱们知道vue-router是vue的核心插件，而当前vue项目通常都是单页面应用，也就是说vue-router是应用在单页面应用中的。
那么，什么是单页面应用呢？在单页面应用出现以前，多页面应用又是什么样子呢？

单页面应用与多页面应用

单页面

即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其余组件，此时路径也相应变化，可是并无新的html文件请求，页面内容也变化了。

原理是：JS会感知到url的变化，经过这一点，能够用js动态的将当前页面的内容清除掉，而后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来作了，而是前端来作，判断页面究竟是显示哪一个组件，清除不须要的，显示须要的组件。这种过程就是单页应用，每次跳转的时候不须要再请求html文件了。

多页面

即 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫作多页应用。
原理是：传统的页面应用，是用一些超连接来实现页面切换和跳转的

其实刚才单页面应用跳转原理即 vue-router实现原理

vue-router实现原理

原理核心就是 更新视图但不从新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪种方式。

路由模式

vue-router 提供了三种运行模式：
● hash: 使用 URL hash 值来做路由。默认模式。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持全部 JavaScript 运行环境，如 Node.js 服务器端

Hash模式

hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，表明的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会从新加载页面。
也就是说

• 即#是用来指导浏览器动做的，对服务器端彻底无用，HTTP请求中，不包含#。
• 每一次改变#后的部分，都会在浏览器的访问历史中增长一个记录，使用”后退”按钮，就能够回到上一个位置。

因此说Hash模式经过锚点值的改变，根据不一样的值，渲染指定DOM位置的不一样数据。

History模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的状况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须从新加载页面；

因为hash模式会在url中自带#，若是不想要很丑的 hash，咱们能够用路由的 history 模式，只须要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。

有时，history模式下也会出问题：
eg:
hash模式下：xxx.com/#/id=5 请求地址为 xxx.com,没有问题。
history模式下：xxx.com/id=5 请求地址为 xxx.com/id=5，若是后端没有对应的路由处理，就会返回404错误；

为了应对这种状况，须要后台配置支持：
在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。
根据平台差别能够看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境作校验，若是发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，因此 在使用 vue-router 时只要不写 mode 配置便可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （固然，你也能够明确指定在全部状况下都使用 abstract 模式）。

具体更加详细的文章，请参考：
Vue番外篇 -- vue-router浅析原理
vue-router的原理