近期口试，碰到关于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的道理