路由原理

• 前端路由就是匹配不同的url路径，进行解析，动态渲染出区域html的内容。
• vue路由的原理就是 在改变url的情况下，保证页面不刷新。

hash

http://www.xxx.com/#/login

• 在#后面的值就是hash值
  可以通过window.location.hash获取，hash值变化并不会让浏览器向服务器发送请求，不发出请求就不会刷新页面。

• 每次hash值的变化，都会触发haschange事件
  通过这个事件，我们可以得知hash值发生了什么变化。 然后便监听haschange来实现更新页面部分内容和增加浏览器历史记录的操作。

• 使用History.push()和History.replace()来对浏览器历史记录的栈进行操作

history

• HTML5新增了两个API: pushState和replaceState
  通过这两个API可以改变url地址且不会发送请求。

• 原理与hash是一样的，且不会多出一个#
  但是因为没有#，所以用户刷新页面时，浏览器还是会发送请求。

• 使用这两个方法修改了浏览器历史记录栈
  虽然url改变了，却不会发送请求。

• 使用window.onpopstate监听。

比较

• url
  pushState设置新url可以是与当前url同源的任意url
  hash只能修改#后的部分，只能设置当前同文档的url

• 记录信息
  pushState可以通过stateObject添加任何类型的数据到记录中
  hash只能添加端字符串

• title
  pushState可以设置title属性供后续使用

• 请求
  history模式会将url修改的和正常请求的url一样，需要后端做对应处理

• 刷新
  history可以输入当前页面url，实现刷新
  hash输入当前路径没有变化