zoukankan      html  css  js  c++  java
  • 前端路由的理解

    前端路由实现方式分为history +pushState popState 与hash +hashchange
     
    hash +hashchange: 原理:
    使用www.hao123.com/#XXX #xxx是不会发给服务器的,浏览器会认为是相同的路径,所以不会对后端发起请求,
    而通过按钮可以改变#后面的路径,这里可以通过hashChange 来获取URl的改变在跳转对应的路径刷新页面。
     
    history 是H5提供的关于前进后退的解决方案 。history +pushState popState 原理:
    由于hash 有带#号,导致前端的URL显示不够优雅。所以可以使用这种方式。
     
    history.length:当前历史列表中的历史记录数
    history.go(n):前进或后退n条记录,当n=0或空时会刷新当前页; 
    history.back():后退一步;
    history.forward():前进一步; 
     

    history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录; data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址;
    history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上; 
    history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样;
    window.onpopstate:响应pushState或replaceState的调用;
     
    需要了解传参
  • 相关阅读:
    一转眼,十年间~~~
    怎样安装PHPnow,并开始使用?
    js的事件类型
    ie兼容性问题 前传
    外层div撑不开的解决办法
    CSS3 新属性搜罗整理
    webApp学习之路
    花式使用CSS3 transition
    20种新颖的按钮风格和效果【附源码】
    酷酷的文本效果
  • 原文地址:https://www.cnblogs.com/lanSeGeDiao/p/8781134.html
Copyright © 2011-2022 走看看