在了解路由模式前，我们先看下 什么是单页面应用，vue-router 的实现原理是怎样的，这样更容易理解路由。
SPA与前端路由
SPA（单页面应用，全程为：Single-page Web applications）指的是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序，简单通俗点就是在一个项目中只有一个html页面，它在第一次加载页面时，将唯一完成的html页面和所有其余页面组件一起下载下来，所有的组件的展示与切换都在这唯一的页面中完成，这样切换页面时，不会重新加载整个页面，而是通过路由来实现不同组件之间的切换。
单页面应用（SPA）的核心之一是：更新视图而不重新请求页面。
vue Router实现原理
vue-router 在实现单页面路由时，提供了两种方式：Hash 模式和 History 模式；vue2是 根据 mode 参数来决定采用哪种方式，默认是 Hash 模式，手动设置为 History 模式。更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有以下两种方式
Hash
简述
- vue-router 默认为hash模式，使用URL的 hash 来模拟一个完整的URL，当URL改变时，页面不会重新加载；# 就是 hash符号，中文名为哈希符或者锚点，在 hash 符号后的值称为 hash 值。
- 路由的 hash 模式是利用了 window可以监听onhashchange 事件来实现的，也就是说 hash 值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括 hash 值，同时每一次改变 hash 值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式 是根据 hash 值 来发生改变，根据不同的值，渲染指定DOM位置的不同数据。
特点
- url中带一个 # 号
- 可以改变URL，但不会触发页面重新加载（hash的改变会记录在 window.hisotry 中）因此并不算是一次http请求，所以这种模式不利于SEO优化
- 只能修改 # 后面的部分，因此只能跳转与当前URL同文档的URL
- 只能通过字符串改变URL
- 通过 window.onhashchange 监听 hash 的改变，借此实现无刷新跳转的功能。
- 每改变一次 hash （ window.location.hash）,都会在浏览器的访问历史中增加一个记录。
- 路径中从 # 开始，后面的所有路径都叫做路由的
哈希值，并且哈希值它不会作为路径的一部分随着http请求，发给服务器
06-01 09:46