无刷新页面,切换视图,用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. Spring远程调用技术<2>-Hessian和Burlap

    上篇谈到RMI技术,加上Spring的封装,用起来很方便,但也有一些限制 这里的Hessian和Burlap解决了上篇提到的限制,因为他们是基于http的轻量级远程服务. Hessian,和RMI一样 ...

  2. java读取excel文件

    package com.execl; import java.io.File; import java.io.FileInputStream; import java.io.IOException; ...

  3. 对象比较器:Comparable和Comparator

    在进行对象数组排序的过程中需要使用到比较器,比较器有两个:Comparable和Comparator ①.java.lang.Comparable:是在类定义是时候默认实现好的接口,里面提供有一个co ...

  4. 【C#】【Thread】CountdownEvent任务并行

    System.Threading.CountdownEvent  是一个同步基元,它在收到一定次数的信号之后,将会解除对其等待线程的锁定. CountdownEvent  专门用于以下情况:您必须使用 ...

  5. 踩坑所引发出的appendChild方法的介绍

    问题描述 最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示.在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件 ...

  6. RPM命令用法

    安装一个包 rpm –ivh 升级一个包 rpm -Uvh 移走一个包 rpm -e 4.校验rpm包 rpm -V < rpm package name> 5.查询一个包是否被安装 rp ...

  7. 几种xml读取方法比较

    背景 这几天手上有个活,解析xml,众所周知xml的解析方法有: DOM SAX linq to xml plinq 测试用xml和生成代码 static void CreateFile() { ; ...

  8. 读书笔记---《火球:UML大战需求分析》

    书评 作为一本UML和需求分析的入门书来说还算可以,写的比较接地气,如果是做过很多项目的读者,很容易找到共鸣点. 美中不足:部分概念可能有错误,其中对于Component和Artifact的解释明显和 ...

  9. 个人作业——关于K米的产品案例分析

    Notice:本文所采用的K米版本为 Version:4.3.0 Release:20161014 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测试 1.下载并使用,描述最简单直观的个人 ...

  10. 软媒魔方 v6.2.1.0 绿色纯净版及经典版

    软媒魔方,最好用的 Windows 系统增强软件!从最早的优化大师发展为一款系统超级增强套装,自动化.智能化解决各种电脑问题.软媒魔方,全新一代Windows系统增强辅助工具,智能+专业双操控模式,系 ...