Vue 前端路由工作原理

一.前端路由介绍:
        路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。

        传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了SPA(单页面架构)。        

        SPA(单页面架构),指的是应用一个主页面,通过动态替换DOM内容并同步修改url地址来模拟多页面应用的效果.切换页面的功能由前端脚本来完成,而不是后端渲染完毕后前端只负责显示.

二.前端路由主要的两种实现方式及原理:
1.location.hash+hashchange事件
实现原理:

        location.hash始终指向页面url 中#之后的内容,通过hashchange事件可以监听location.hash的变化，从而进行相应的处理即可。

触发hash的改变:

        1.设置a标签，href = '#/home'，当点击标签的时候，可以在当前url的后面增加上'#/home'，同时触发hashchange,再回调函数中进行处理

        2.直接在js中对location.hash = '#/blue'即可，此时url会改变，也会触发hashchange事件。

 

上图代码通过hashchange事件,点击相应的a链接,使url地址相应的改变,从而实现切换页面的功能.

2.history.pushState()+popState事件
实现原理:

       history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新

history.pushState(data[,title][,url]);//向历史记录中追加一条记录
history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
        history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。

 

  上图代码通过popState事件,点击相应的a链接,使url地址相应的改变,从而实现切换页面的功能.