想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了。

说一下基于hashchange导航管理:

浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的history对象还可以实现浏览器的导航.

例如:window.history.back();//后退

window.forward();//前进

window.history.go(-1);//后退一步

window.history.go(1)//前进一步

这些方法都会有一个共同的特点是都会导致浏览器重新加载刷新,频繁的页面加载会消耗大量的时间,对用户的体验极差。

还好,url中有个特殊的部分是hash片段,在同一个网页当中不同的得hash切换不会重新刷新加载页面,但是会在history留下历史记入。在hash片段发生变化时会触发hashchange事件,来进行切换。就这么多了 看一下demo:

可以看一下该事件的对象:  重要事情说一遍:

基于hashchange导航管理的更多相关文章

  1. GJM :用JIRA管理你的项目(三)基于LDAP用户管理 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  2. 结合docker发布后端项目(基于gradle包管理)的shell脚本

    结合docker发布后端项目(基于gradle包管理)的shell脚本 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统(敏感信息都进行了处理) 目前主流的 ...

  3. 结合docker发布前端项目(基于npm包管理)的shell脚本

    结合docker发布前端项目(基于npm包管理)的shell脚本 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统 目前主流的前后端分离的项目中,常常在部署 ...

  4. 开源基于lua gc管理c++对象的cocos2dx lua绑定方案

    cocos2dx目前lua对应的c++对象的生命周期管理,是基于c++析构函数的,也就是生命周期可能存在不一致,比如c++对象已经释放,而lua对象还存在,如果这时候再使用,会有宕机的风险,为此我开发 ...

  5. [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识(包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等)·长文

    综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...

  6. 【基于url权限管理 shiro(一)】--基础

    只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源.权限管理包括用户认证和授权两部分.   用户认证 1.概 ...

  7. 基于 vue2 导航栏透明渐变

    在移动或者app 中经常会用,顶部导航栏固定,但是随着页面向上滚动,导航栏的透明度发生变化. 做法为: 1.首先给要滚动变化的导航添加 :style="style" <mt- ...

  8. Shiro集成SSM基于URL权限管理(一)

    学习了shiro之后,我们就可以说尝试把shiro加入ssm中,并做一套基于URL的权限管理. 其他的准备工作就不多说了,直接动手操作,看到效果再去理解. 表结构 执行如下,数据库名字可以自行修改,不 ...

  9. 基于角色权限管理:rbac具体代码实现

    权限管理 创建一个rbac和app的应用,这个rbac主要是用来存放权限的,全称叫做基于角色权限控制 一.先看配置文件合适不,给创建的rbac在配置文件里面设置一下 找到INSTALLED_APPS= ...

随机推荐

  1. Java基础---Java---IO流-----File 类、递归、删除一个带内容的目录、列出指定目录下文件夹、FilenameFilte

    File 类 用来将文件或者文件夹封装成对象 方便对文件与文件夹进行操作. File对象可以作为参数传递给流的构造函数 流只用操作数据,而封装数据的文件只能用File类 File类常见方法: 1.创建 ...

  2. Linux 64位下一键安装scipy等科学计算环境

    Linux 64位下一键安装scipy等科学计算环境 采用scipy.org的各种方法试过了,安装还是失败.找到了一键式安装包Anaconda,基本python要用到的库都齐了,而且还可以选择安装到其 ...

  3. "ORA-20100: 为 FND_FILE 创建文件 o0003167.tmp 失败"

     今天在运行请求时候得到如下的错误日志: 原因:由于ORA-20100:为FND_FILE创建文件o0003167.tmp失败. 在请求日志的错误原因中您会找到更详细的信息. 查找了一些资料,总结 ...

  4. hashmap 循环取出所有值 取出特定的值 两种方法

    //第一种 Iterator menus = menu.iterator(); while(menus.hasNext()) { Map userMap = (Map) menus.next(); S ...

  5. mysql进阶(二十四)防御SQL注入的方法总结

    防御SQL注入的方法总结 这篇文章主要讲解了防御SQL注入的方法,介绍了什么是注入,注入的原因是什么,以及如何防御,需要的朋友可以参考下. SQL注入是一类危害极大的攻击形式.虽然危害很大,但是防御却 ...

  6. XML Publisher Report Issues, Recommendations and Errors

    In this Document   Purpose   Questions and Answers   References APPLIES TO: Oracle Process Manufactu ...

  7. 一个炫字都不够??!!!手把手带你打造3D自定义view

    分享一则最近流行的笑话: 最新科学研究表明:寒冷可以使人保持年轻,楼下的王大爷表示虽然今年已经60多岁了,但是仍然冷的跟孙子一样. 呃.好吧,这个冬天确实有点冷,在广州活生生的把我这个原生北方人,冻成 ...

  8. javascript 实战总结

    JavaScript的简单的知识前面已经总结  欢迎交流学习,学习靠的是理论+实践,  通过姜昊老师的JavaScript专题训练,加深了对理论知识的理解,学习新的语言越来越发现熟悉的背景,基础内容是 ...

  9. SpriteBuilder中如何固定两个互不接触的物理物体?

    如下图: 这个弹簧装置由3部分组成(从上到下): 弹板 弹簧 弹簧金属底座 其中弹板将固定在弹簧上(但并没有接触,如上图),这就引出一个有趣的问题:怎么样才能将两个独立的物理物体(注意:是物理物体)固 ...

  10. mongodb系列之--mongodb 主从配置与说明

    一.为什么要配置mongodb的主从: 1.做主从,可以说是做数据的备份,有利于故障的恢复 2.做主从,可以做到读写分离,主节点负责写操作,从节点负责读操作,这样就把读写压力分开,保证系统的稳定性. ...