无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服。

最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行。为了加深理解其内涵原理,遂决意写一个最简单的hash 路由。

思路很简单,自己维护一个 hash route 的哈希表,通过注册路由及其处理事件,通过hashchange来触发对应事件处理,有点像观察者模式的思想,先注册,再派发。

实现方法

  • maps 批量注册
  • add 单条注册
  • remove 单条删除
  • clear 全部清空
  • go 跳转指定
  • redirect 重定向

使用

function h(){}
HashRoute
.maps({
home: h,
list: h
})
.add('info', h)
.remove('info')
.clear()
.go()

demo效果展示

源码下载

HahsRouter hash 路由的更多相关文章

  1. 告别 hash 路由,迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

  2. 前端hash路由基本原理,及代码的基本实现

    路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...

  3. React SPA 应用 hash 路由如何使用锚点

    当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...

  4. hash路由

    class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...

  5. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  6. js单页hash路由原理与应用实战

    什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能坐在一个页面内. 那所谓的单页路由应 ...

  7. hash路由(哈希路由)

    1.https://www.cnblogs.com/huanying2015/p/8047376.html (js 哈希路由原理实现) 2.https://www.cnblogs.com/yeer/a ...

  8. vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  9. Angular 修改路由策略,改为使用hash路由,即带#号URL

    修改app.module.ts如下  

随机推荐

  1. POJ2505 A multiplication game[博弈论]

    A multiplication game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6028   Accepted:  ...

  2. NOIP模拟赛20161022

    NOIP模拟赛2016-10-22 题目名 东风谷早苗 西行寺幽幽子 琪露诺 上白泽慧音 源文件 robot.cpp/c/pas spring.cpp/c/pas iceroad.cpp/c/pas ...

  3. java程序设计之反弹高度

    题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? 代码: public class highe { double high ...

  4. 玩转Unity资源,对象和序列化(上)

    这是一系列文章中的第二章,覆盖了Unity5的Assets,Resources和资源管理 本文将从Unity编辑器和运行时两个角度出发,主要探讨以下两方面内容:Unity序列化系统内部细节以及Unit ...

  5. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 总部业务部门主管管理整个集团分公司的某项业务

    由于整个集团公司非常庞大,有上千个分支机构,不可能由总部某个人能管理所有的数据,或者掌握所有的业务.某个业务都会由于某个相应的部门进行管理,例如所有分公司的人力资源,都由总部的人力资源部门管理.哪些分 ...

  6. HTTPS 原理解析

    一 前言 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全.为了保证 ...

  7. php特殊用法

    1.将字符串转换成可执行的php代码(简单的代码)--eval() <?php $str="echo phpinfo();"; echo eval( $str);

  8. python实现计算器

    计算器功能 实现优先级解析,加减乘除四则运算 自定义小数位精度 实现思想: 先找到最里层括号,根据乘除,加减优先级,调用写好的乘除.加减运算函数算出括号内总值,再将原括号式用所得值替换,此过程循环进行 ...

  9. Android Studio22-NDK-LLDB调试

    Android Studio2.2更好的支持NDK开发,并可以像开发java一样的DEBUG程序,不需要添加gradle-experimental插件,就可调试代码! 一,下载 NDK 和构建工具 要 ...

  10. jquery 将disabled的元素置为enabled的三种方法

    转--http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disab ...