vue路由原理及源码解读

随着前端的不断发展，用户对于使用体验的要求越来越高，单页面（SPA)成为前端的主流形式，在使用vue开发单页面时，离不开vue-router，今天我们就来好好聊聊前端路由，一探vue-router究竟。

前端路由

前端路由的实现主要就是通过地址栏url的变化，触发某些事件，然后对地址栏的url进行解析，动态的渲染html。在2014年之前前端路由只有hash模式，后来随着HTML5标准发布，也多了一个history模式。

1、hash模式

在url中，#后面的值称为hash值，可以通过window.location.hash获取，#代表网页中的一个位置，其后面的字符，就是该位置的标识符。因为#是用来指导浏览器动作的，对服务端完全没有作用，#后面出现的任何字符都会被浏览器解读为位置标识符，所以#后面的字符都不会发送到服务器端。而hash值的每次变化都会触发hashChange事件，正是利用了这些特性实现了hash模式路由，通过hashChange事件监听hash值得变化，从而实现路由切换，页面匹配对应的内容，每一次改变hash都会在浏览器的访问历史中增加一个记录。

function renderHtml() {
    console.log(window.location.hash);
    //在这里可以获取到最新的hash值，然后进行对应的操作页面渲染
}
window.addEventListener('hashchange', renderHtml);

2、history模式

history主要通过pushState 和 replaceState这两个 API， 可以改变 url 地址且不会发送请求。同时还有popstate 事件。原理都是跟 hash 实现相同。用history模式实现路由，单页面路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面或者直接在地址栏中输入地址按回车时，浏览器还是会给服务器发送请求。为了避免出现这种情况，需要服务端的支持，需要把所有路由都重定向到根页面。

3、vue中路由的实现

。。。未完待续