前端路由的工作方式:html页面内内容跳转

xiaogu达到效果:点击页面里标题信息,然后跳转到页面的某个部位

逻辑:其实点击的是链接,锚链接 b1 

前端路由的工作方式:html页面内内容跳转_第1张图片

前端路由的工作方式:html页面内内容跳转_第2张图片

前端路由的工作方式:html页面内内容跳转_第3张图片

前端路由的工作方式:html页面内内容跳转_第4张图片右上角箭头可以返回,说明是产生浏览记录 

前端路由的工作方式:html页面内内容跳转_第5张图片

前端路由的工作方式:html页面内内容跳转_第6张图片

讲到hash地址,就讲到了前端路由的工作方式: 

  1. 用户点击了页面上的路由链接 
  2. URL地址栏中的Hash值发生变化
  3. 前端路由监听到了Hash地址的变化
  4. 前端路由把变化后的Hash地址对应的组件渲染到浏览器中

你可能感兴趣的:(html,前端)