hash路由
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路由的更多相关文章
- HahsRouter hash 路由
无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...
- 告别 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 ...
- 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如下
随机推荐
- awk从放弃到入门（3）：awk变量
一.变量概述 对于awk来说"变量"又分为"内置变量" 和 "自定义变量" , "输入分隔符FS"和"输出分隔 ...
- 【C语言】用C语言输出一个吃豆人
大圆盘减去扇形和小圆盘: #include <math.h> #include <stdio.h> int main() { double x, y; ; y >= -; ...
- ABB工业机器人(条件执行数字信号判断，画方or画圆)
一.前戏 条件:从安全点,到工具区域夹取工具(笔),到工作区域,判断数字信号 Di1 =1 ,Ture :画方,False:画圆,回到工具区域放下工具(笔),回到安全点 二. 准备工作 校准tcp工具 ...
- 百炼OJ - 1001 - Exponentiation
题目链接 哇一遍AC的感觉也太爽了吧:) #include <stdio.h> #include <string.h> int times=0; char *myCalc(ch ...
- codeforces 711 D.Directed Roads（tarjan 强连通分量 ）
题目链接:http://codeforces.com/contest/711/problem/D 题目大意:Udayland有一些小镇,小镇和小镇之间连接着路,在某些区域内,如果从小镇Ai开始,找到一 ...
- es7实现数学乘方
//math.pow简写方法 console.log(2 ** 6)
- php提供下载服务实例
两个步骤:1,通过header头信息告诉浏览器,我给你回应的是一个附件请接收 2,通过php读取下载的文件的内容并返回 前端 <!DOCTYPE html> <html lang=& ...
- Ubuntu16.04安装TORCS
下载torch安装包: git clone https://github.com/torch/distro.git torch --recursive 安装依赖库: cd torch/ sudo ba ...
- java的动态绑定和多态
public class Shape { public void area() { System.out.println("各种形状的面积..."); } public stati ...
- CDH安装时，无法纳管全部的节点的一个bug
问题描述: 使用CDH 5.2版本安装时,agent节点有12个.按照安装说明,在各个节点启动cm-agent之后,发现只有6个节点能被纳管.其它的节点总是无法加入纳管中. 在确认防火墙已经关闭后 ...