无刷新页面,切换视图,用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. [普通平衡树splay]【学习笔记】

    参考: http://blog.csdn.net/clove_unique/article/details/50630280 gty课件 找一个好的风格太难了,自己习惯用struct,就强行用stru ...

  2. sicily vector有序插入

    实现了简单的vector有序插入,这个题目值得注意的点是1.当vector为空时,需要判断再排除 2.迭代器的使用是此段代码的特点 int insertVector(vector<int> ...

  3. Struts2 入门

    一.Struts2入门案例 ①引入jar包 ②在src下创建struts.xml配置文件 <?xml version="1.0" encoding="UTF-8&q ...

  4. ruby不能识别中文的一个坑

    需要安装readline,并重装ruby,挂readline编译. 后续发现总出错,然后发现brew包依赖不全,按照提示,一个一个的安装依赖.安装后使用rvm重装ruby就ok了. 多亏能够有办法上g ...

  5. linux解压rar压缩文件

    服务器是阿里云的 centos 默认linux是没有安装解压rar,zip的软件的.而网上找到的yum install命令也没有用.而且这个rar并不是免费的,只有40天的试用期...真是坑啊 由于用 ...

  6. .NET 常用框架

    1.Hangfire 2.Lucene.Net 3.Log4Net 4.Quartz.Net 5.Autofac 6.SqlSugar 7.NPOI 8.Senparc.Weixin.MP 9.Aut ...

  7. 恢复 Windows 7 的“回到父目录”按钮

    Windows 7 使用以来很多方面一直不习惯,特别是让我无比纠结的”回到父目录“ 按钮从资源管理器中消失了. 不能不说这是一个失败! 很多时候,Win 7 地址栏中自以为是的显示的很多层目录层次的面 ...

  8. 教你一招:win 7 或win 10右键菜单 添加获取管理员权限

    当我们从经典的 windows XP 系统升级到 win 7 或 win 10,我们会发现,想要删除一些文件时,总是提示被占用或者是没有权限,很是烦恼. 这里,写下解决这个烦恼的办法,以安慰心里的不平 ...

  9. NSArray 倒序 输出

    NSMutableArray *array = [NSMutableArray arrayWithObjects:@"1",@"2",@"3" ...

  10. poi导出的excel的数字小数位过多?

    最近在使用Apache的POI组件对Excel进行操作,在对excel导出的时候,导出的数字本来只有两位小数,得到的结果就变成了很多位小数.如下面的图所示: 虽然对单元格使用了setCellStyle ...