浅谈单页应用SPA实现原理

背景介绍

项目中本人使用Vue作为主要技术栈，众所周知Vue主要用于开发单页面（SPA）应用的框架，具有良好的用户体验，用户不需要重新刷新页面，获取数据也是通过Axios异步获取，使得页面显示更为流畅。

分析

既然这样，那我们就探究下单页SPA的实现原理吧：查阅相关资料，目前主要有两种实现方式1、监听hash的改变 2、H5新增的的history API

Hash

在url中可以带上一个#,这个就相当于是hash,比如下面的singlepage

http://www.paul.com/index.html#singlepage

当url的片段标识符发生变化时，将触发window对象中的onhashchange事件， 然后做一些操作即可，在以下几种情况下会触发window的onhashchange事件

1. 直接更改浏览器地址，在最后面增加或改变#hash；
2. 通过改变location.href或location.hash的值；
3. 通过触发点击带锚点的链接；
4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

我们可以拿到window.onhashchange中的方法回调,此时回调中有两个重要的属性如下，分别代表跳转前后的url地址

<a href="#singlepage">click me</a>
<script type="text/javascript">
  window.onhashchange = function(e){
   
    console.log(e.oldURL);   //http://www.paul.com/index.html
    console.log(e.newURL);   //http://www.paul.com/index.html#singlepage
  }
</script>  

现在我们只需要做一些简单的对比即可，那么我们如何拿到当前的hash值呢。其实呢也简单，我们都知道页面的location对象，其中就有一个我们需要的属性hash：

关键的地方我们已经找到了，既然这样的话现在就能用代码实现简单的单页应用了

//html
<a href="#singlepage">单页SPA