一、路由模式解析

路由是由多个URL组成，使用不同的URL可以相应的导航到不同的位置

服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面都会重新进行请求。而实际使用vue和vue-router开发。在切换页面时是重新进行请求，使用起来就好像页面是有状态，

这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就能被维持在浏览器中的。

vue-router 中默认使用是hash 模式，也就是会出现如下的URL：
URL中带有#号

实际上存在三种模式

  • Hash: 使用URL的hash值来作为路由，支持所有浏览器
  • History:以来HTML5 History API和服务器配置。
  • Abstract : 支持所有javascript 运行模式，如果发现没有浏览器的API.路由会自动强制进入这个模式

两种模式的区别

1.hash模式

hash模式背后的原理是onhashchange事件，可以在window 对象上监听这个事件：
网易云音乐，百度网盘就采用了hash路由，看起来就是这个样子:
http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list

2.history 路由

随着history api 的到来，前端路由开始进化，前面的hashchange ，你只能改变#后面的url片段，而history api则给了前端完全的自由

history api 可以分为两个大部分;切换和修改

（1）切换历史状态

包括back 、forward、go三个方法，对应浏览器的前进，后退，跳转操作，
（2）修改历史状态
包括pushState、replaceState 两个方法，这两个方法接收三个参数;stateObj，title，url

不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。