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效果展示

源码下载

时间: 2024-08-18 17:06:11

HahsRouter hash 路由的相关文章

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

路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 reload 就能刷新数据,也给前端路由的出现奠定了基础.我们可以通过记录 url 来记录 ajax 的变化,从而实现前端路由.(可以根据不同的url来展示不同的页面,很好的优化了页面的交互体验.)目前有两种方式: 1:H5的history的新API(pushstate.replacestate.

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

当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题. 经过我自己的搜索目前有两种方式能够解决这个问题,为了能在 react 生态下面简单优雅的使用,我专门封装了一个锚点组件 react-anchor-without-hash,它使用了类似原生 a 标签的写法,并且可以支持滚动的距离和

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

1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 window 3. window.location.hash 4. hash 是属于 window.location 这个对象,而history直接属于 window 5. window.history 6. 是因为路由模式下,当hash值发生改变,不会发生网络请求,但是href会,vue会自动监听hash

利用hash或history实现单页面路由

目录 在chrome(版本 70.0.3538.110)测试正常编写涉及:css, html,js, node(koa) 在线演示codepen html代码 <div class="hash"> <div class="title">hash 路由</div> <a href="#/one">hash 1</a> <a href="#/two">hash

前端路由hash、history原理

本文参考https://www.cnblogs.com/tugenhua0707/p/10859214.html 先来看下后端路由的实现方式: 1. 浏览器向服务器发出请求.2. 服务器监听到80端口,如果有请求过来,那么就解析url地址.3. 服务器根据客户端的路由配置,然后就返回相应的信息(比如html字符串.json数据或图片等).4. 浏览器根据数据包的 Content-Type来决定如何解析数据. 缺点: 每次路由切换的时候都需要去刷新页面,然后发出ajax请求,然后将请求数据返回回来

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由.在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现40

SPA学习之 - 路由插件(crossroads.js)

Crossroads.js是一个受Rails, Pyramid, Django, CakePHP等基于路由/分发(Route/Dispatch)方式处理路由的后端MVC框架启发的一套js专业路由库.它能够直接解析传入的字符串并根据相应的规则来过滤和验证路由,然后再执行下一步的操作. A duck can walk, fly and swim, but he can’t do any of these things well… crossroads.js是一个独立的库功能十分强大和灵活,而且职责单

海量路由表可以使用HASH表存储吗-HASH查找和TRIE树查找

千万别!很多人这样说,也包括我.Linux内核早就把HASH路由表去掉了,现在就只剩下TRIE了,不过我还是希望就这两种数据结构展开一些形而上的讨论. 1.hash和trie/radix hash 和tire其实是可以统一在一起的.具有相同hash值的多个项具有一个共同的特征,这个特征怎么提取呢?无疑这就是hash函数的工作.而trie树 (或者radix树,管它呢)的一棵子树也有共同的特征,这个特征怎么提取呢?无疑这就是该子树根节点的父节点指示的某些bits在这棵子树的每一个节点 都具有相同的

一致性Hash算法(转载)

原文地址http://blog.csdn.net/caigen1988/article/details/7708806 consistent hashing 算法早在 1997 年就在论文Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 基本场景 比如你有 N 个 cache 服务器(后面简称 cache ),那么如何将一个对象 object 映射到 N 个 cache 上呢,你很可能会采用类似下面的通用方法计算 o