前端路由实现原理

1.url的锚部分#

url的锚部分（即从#开始的部分），用window.location.hash来读写，#是用来指导浏览器动作的，#后面的字符串，都会被浏览器解析为位置标识符，#对服务器端完全无用（即不去浏览器下载文件，不触发浏览器重载），但会改变浏览器的访问历史

 <div style="height:1500px">
    <div style="margin-bottom:50px">
      <a href="#id1">id跳转</a>
      <div id="id1" style="height:20px;background-color:#e8afaf">id跳转</div>
    </div>

    <div>
      <a href="#print">锚点跳转</a>
      <br>
      <a name="print" style="height:20px;background-color:#9a9ad6">锚点跳转</a>
    </div>
  </div>

2.前端路由

前端路由是直接找到与地址匹配的对象或者组件并将其渲染出来，改变浏览器地址不发送请求的方式有两种：

1.加入#进行页内导航

2.使用window.history模拟完整的url