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如下
随机推荐
- 自动装配[@Autowired]的歧义性
在使用@Autowired自动装配时,如果一个接口有多个实现类,那么自动装配就会出现错误,因为Spring无法判断到底要装配哪个实现类实例(bean). 1.可以使用@Qualifier(" ...
- DayOfWeek
int a =(int)oneDate.DayOfWeek; 返回的直接就是 1,2,3,4,5,6, 星期日返回的是0
- JS获取屏幕高度(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- Java 8新特性终极指南
目录结构 介绍 Java语言的新特性 2.1 Lambdas表达式与Functional接口 2.2 接口的默认与静态方法 2.3 方法引用 2.4 重复注解 2.5 更好的类型推测机制 2.6 扩展 ...
- ruby不能识别中文的一个坑
需要安装readline,并重装ruby,挂readline编译. 后续发现总出错,然后发现brew包依赖不全,按照提示,一个一个的安装依赖.安装后使用rvm重装ruby就ok了. 多亏能够有办法上g ...
- Oracle 实验四-七
shutdown immediateORA-01097: 无法在事务处理过程中关闭 - 请首先提交或回退 解决:先 "commit" 实验四 SQL Production :: C ...
- java中hashcode()和equals()的详解
今天下午研究了半天hashcode()和equals()方法,终于有了一点点的明白,写下来与大家分享(zhaoxudong 2008.10.23晚21.36). 1. 首先equals()和hashc ...
- 关于php自带的访问服务器xml的方法的坑
就据我了解,php中有两种读取读取xml文件的方法,我就简单介绍一下, 一种是使用simplexml_load_file($src)读取xml文件.simplexml_load_file会把该函数参数 ...
- Ubuntu使用MyEclipse闪退的解决办法
修改myeclipse.ini文件, -Xmx512m-XX:MaxPermSize=512m-XX:ReservedCodeCacheSize=256m-Dosgi.nls.warnings=ign ...
- c#反射-动态加载dll简单例子
假设已有组件ClassLibraryTEST.dll,放置于程序目录下.组件中ClassLibraryTEST命名空间下有TEST类,类中有方法sum.下面示例就是动态加载组件并调用sum方法的简例: ...