class HashRouter{
　　constructor(){
　　//用于存储不同hash值对应的回调函数
　　this.routers = {};
　　window.addEventListener('hashchange',this.load.bind(this),false)
}
//用于注册每个视图
register(hash,callback = function(){}){
　　this.routers[hash] = callback;
}
//用于注册首页
registerIndex(callback = function(){}){
　　this.routers['index'] = callback;
}
//用于处理视图未找到的情况
registerNotFound(callback = function(){}){
　　this.routers['404'] = callback;
}
//用于处理异常情况
registerError(callback = function(){}){
　　this.routers['error'] = callback;
}
//用于调用不同视图的回调函数
load(){
　　let hash = location.hash.slice(1),
　　handler;
//没有hash 默认为首页
if(!hash){
　　handler = this.routers.index;
}
//未找到对应hash值
else if(!this.routers.hasOwnProperty(hash)){
　　handler = this.routers['404'] || function(){};
}
else{
　　handler = this.routers[hash]
}
//执行注册的回调函数
try{
　　handler.apply(this);
　}catch(e){
　　console.error(e);
　　(this.routers['error'] || function(){}).call(this,e);
　　　　}
　　}
}
//HTML

<body>

    <div id="nav">

         <a href="#/page1">page1</a>

         <a href="#/page2">page2</a>

         <a href="#/page3">page3</a>

        <a href="#/page4">page4</a>

        <a href="#/page5">page5</a>

     </div>

     <div id="container"></div>

</body>

//js实现
let router = new HashRouter();
let container = document.getElementById('container');

//注册首页回调函数
router.registerIndex(()=> container.innerHTML = '我是首页');

//注册其他视图回到函数
router.register('/page1',()=> container.innerHTML = '我是page1');
router.register('/page2',()=> container.innerHTML = '我是page2');
router.register('/page3',()=> container.innerHTML = '我是page3');
router.register('/page4',()=> {throw new Error('抛出一个异常')});

//加载视图
router.load();
//注册未找到对应hash值时的回调
router.registerNotFound(()=>container.innerHTML = '页面未找到');
//注册出现异常时的回调
router.registerError((e)=>container.innerHTML = '页面异常，错误消息：<br>' + e.message);

hash 路由可以兼容到IE8如果需求兼容到IE8就使用hash路由，如果没要求建议使用history路由

hash路由的更多相关文章

  1. HahsRouter hash 路由

    无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...

  2. 告别 hash 路由，迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

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

    路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...

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

    当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...

  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. Linux - Shell - shell 执行方式

    概述 shell 的执行方式 背景 偶尔执行个 shell 脚本 一般都用 './script' 执行 最近忽然看到 有不同的执行方式, 感觉有必要整理一下, 然后和大家分享 准备 os centos ...

  2. Linux(Mac)常用命令

    df -B[G,M,K]查看磁盘剩余空间 free -mh查看内存 netstat -ntlp查看当前监听的网络端口 mount -t auto /dev/cdrom /media/cdrom挂载cd ...

  3. VS“无法查找或打开PDB文件”是怎么回事？如何解决

    有时候,我们使用 VS(Visual Studio)编译程序时会出现“无法查找或打开PDB文件”的提示,并且此时程序会生成失败,无法运行,如下图所示: 大家不要惊慌,出现这种提示并不是代码写错了,而是 ...

  4. Web 安全工具篇：Burp Suite 使用指南

    真的是一点都不过分,了解详情请继续往下读. Burp Suite 介绍 Burp Suite 是用于攻击 web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程 ...

  5. 通过scrapy，从模拟登录开始爬取知乎的问答数据

    这篇文章将讲解如何爬取知乎上面的问答数据. 首先,我们需要知道,想要爬取知乎上面的数据,第一步肯定是登录,所以我们先介绍一下模拟登录: 先说一下我的思路: 1.首先我们需要控制登录的入口,重写star ...

  6. Visual Studio Code修改全屏背景

    打开VSCode安装目录,找到workbench.desktop.main.css文件 在最后一行添加以下代码: body{ pointer-events:auto !important; backg ...

  7. 【PAT甲级】1103 Integer Factorization (30 分)

    题意: 输入三个正整数N,K,P(N<=400,K<=N,2<=P<=7),降序输出由K个正整数的P次方和为N的等式,否则输出"Impossible". / ...

  8. 【C语言】创建一个函数，利用该函数将两个字符串连接起来

    代码: #include<stdio.h> ], ]) { int i, j; ; c[i] != '\0'; i++); ; d[j] != '\0'; j++) { c[i++] = ...

  9. JavaScript对象，函数，作用域

    JavaScript对象 在 JavaScript中,几乎所有的事物都是对象.JavaScript 对象是拥有属性和方法的数据. var car = {type:"Fiat", m ...

  10. 利用ZotFile对Zotero中的文献进行整理

    1.安装ZotFile插件 *** 以后补充 *** 2.配置ZotFile 配置 3.整理操作 (1)将文件拖进Zotero软件相应的目录(自己创建) (2)查看文件位置 (未整理之前) (3)整理 ...