HahsRouter hash 路由
无刷新页面,切换视图,用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 路由的更多相关文章
- 告别 hash 路由,迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- 前端hash路由基本原理,及代码的基本实现
路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...
- React SPA 应用 hash 路由如何使用锚点
当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...
- hash路由
class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- js单页hash路由原理与应用实战
什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能坐在一个页面内. 那所谓的单页路由应 ...
- hash路由(哈希路由)
1.https://www.cnblogs.com/huanying2015/p/8047376.html (js 哈希路由原理实现) 2.https://www.cnblogs.com/yeer/a ...
- vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?
1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...
- Angular 修改路由策略,改为使用hash路由,即带#号URL
修改app.module.ts如下
随机推荐
- [NOIP2014]自测
这两天做完了2014年的noip提高. 因为以前看了SDSC2016时gty的课件,题目思路都知道了一点,做起来没多大困难. 100+100+75+100+100+70=545 里面水分好多,好多题都 ...
- java 移位运算符
java中有三种移位运算符 << : 左移运算符,num << 1,相当于num乘以2 >> : 右移运算符,num >& ...
- sqlite常用查询
做的小工具用到了sqlite,在查询上较sqlserver还是稍有差异,将常用操作汇总一下,慢慢收集和整理. --查询版本SELECT sqlite_version() AS 'SQLite Vers ...
- Spring.net使用说明
使用方法: 1.在配置文件设置Spring.net 节点 在配置节中,声明Spring.net,配置 context,objects 标签,来源(type) <!--配置节:主要用来 配置 a ...
- J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别
转自:http://www.metsky.com/archives/547.html 一.J2EE.J2SE.J2ME区别 J2EE——全称Java 2 Enterprise Edition,是Jav ...
- java并发编程学习: 阻塞队列 使用 及 实现原理
队列(Queue)与栈(Stack)是数据结构中的二种常用结构,队列的特点是先进先出(First In First Out),而Stack是先进后出(First In Last Out),说得通俗点: ...
- Android 高清加载巨图方案 拒绝压缩图片
Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...
- .net ServiceStack.Redis 性能调优
最近在debug生产环境的问题时,发现了ServiceStack 4.0.60版本RedisClient存在一个非常严重的性能问题.在高并发下,PooledRedisClientManager.Get ...
- 序列化效率比拼——谁是最后的赢家Newtonsoft.Json
前言:作为开发人员,对象的序列化恐怕难以避免.楼主也是很早以前就接触过序列化,可是理解都不太深刻,对于用哪种方式去做序列化更是随波逐流——项目中原来用的什么方式照着用就好了.可是这么多年自己对于这东西 ...
- IPv4组播通信原理
2011-05-08 21:21:14 标签:组播 vin_do,vin_do学习笔记,笔记 休闲 职场 摘自网络,感谢原作者 摘要: 本文试图成为学习TCP/IP网络组播技术的入门材料.文中介绍了组 ...