前端路由的两种模式

一、  hash模式

1、认识window.location

表示其链接到的对象的位置（URL）。在控制台打印window.location，可以看到有以下的属性和方法

其中window.location.hash会存有一个哈希值，这个hash是指URL中：

#之后的路径地址（包含#）

2、hash在页面中有什么作用

● 锚点定位

<script type="text/javascript">
function showNode (oNode) {var nLeft = 0, nTop = 0;for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);window.scrollTo(nLeft, nTop); 
}

function showBookmark (sBookmark, bUseHash) {if (arguments.length === 1 || bUseHash) {window.location.hash = sBookmark;return;}var oBookmark = document.querySelector(sBookmark);if (oBookmark) { showNode(oBookmark); }
}
</script> 

<p id="myBookmark1"><span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>
</p>
...
<p id="myBookmark2"><span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span>
</p> 

通过以上代码，可以实现在同一个文档下，可以通过点击到达对应的书签处，那我们怎么知道当前处在哪个书签呢？可以将该书签作为一个URL的hash。

同样的场景，其实通过a标签也能实现

<nav><ul><li><a href="#md01"> 跳转到锚点1</a></li><li><a h