vue 路由原理

前端路由

1.hash模式
随着ajax的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是spa -- 单页应用
应用部仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用，所以就有了前端路由。
类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的url路径，进行解析，然后动态的渲染出区域html内容。但是这样存在一个问题，就是url每次变化的时候，都造成页面的刷新。那解决问题的思路便是在改变url的情况下，保证页面的不刷新。

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

这种#后面hash值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次hash值的变化，还会出发hashchange事件，通过这个时间我们就可以知道hash值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作:

window.addEventListener('hashchange',fn)

2.history模式
html5 api 多了两个API pushState replaceState, 通过这2个API可以改变url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由，但原理都是跟hash实现相同的.用了html5的实现，单页路由的url就不会多出一个#，变得更加美观.但因为没有#号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器支持，需要把所有路由都重定向到根页面.

window.addEventListener('popstate',fn)