vue-router实现原理——SPA单页面应用

根据vue-router页面中的mode参数来决定采用哪一种方式

1.hash模式（使用URL hash值作为路由，默认模式）

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

• #是用来指导浏览器动作的，对服务器完全无用，HTTP请求中，不包含#
• 每次改变#后的部分，都会在浏览器访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。

hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

2.history模式

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

由于hash模式会在url中自带#，如果不想要很丑的hash，就可以使用路由的history模式，但是有时会出现问题：

• hash模式下：xxx.com/#/id=5 请求地址为xxx.com没有问题
• history模式下：xxx.com/id=5 请求地址为xxx.com/id=5,如果后端没有对应的路由处理，会返回404错误。（应对措施：需要后台配置支持，在服务端增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则返回同一个index.html页面，这个页面就是app依赖的页面）

3.abstract模式（支持所有javascript运行环境）