路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。

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

1:H5的history的新API(pushstate、replacestate、popstate);由于不兼容IE10以下,本文不进行讨论;可自行查看官网:https://developer.mozilla.org/en-US/docs/Web/API/History

2:hash路由基本实现原理:

  * 浏览器不会识别url中#后面的内容,所以改变#后面的内容不会触发reload;

  * 通过hashchange我们可以监听到#后面内容的改变,然后就可以进行ajax等操作。实现页面的改变

在线Demo直通车

下面代码展示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*css代码比较混乱,大家不用在意这里*/
* {
margin: 0;
padding: 0;
}
.container {
box-sizing: border-box;
}
.leftSide {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 300px; background-color: #bbb;
}
.rightSide {
display: flex;
align-items: center;
justify-content: center;
float: right;
width: 50%;
height: 300px;
background-color: #5bb;
}
</style>
</head>
<body>
<div class="container">
<div class="rightSide">
<div id="myPage"> </div>
</div>
<div class="leftSide">
<ul>
<li><a href="#/">默认 </a></li>
<li><a href="#/blue"> 蓝</a></li>
<li><a href="#/black">黑 </a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="./myRouter.js"></script>
</html>
(function() {
class Router {
constructor() {
this.routes = {};
this.currentUrl = "";
}
init() {
window.addEventListener('load', () => this.refresh(), false);
window.addEventListener('hashchange',() => this.refresh(), false);
}
refresh() {
this.currentUrl = location.hash.slice(1) || "/";
if (typeof this.routes[this.currentUrl] === 'function') {
this.routes[this.currentUrl]();
}else {
this.routes["/404"]();
}
}
route(path, callback) {
this.routes[path] = callback;
}
}; function changeView(str) {
document.getElementById("myPage").innerHTML=str;
} var router=new Router();
router.init();
router.route("/", () => changeView("<h1>默认页面</h1>"));
router.route("/blue", () => changeView("<h1>blue页面</h1>"));
router.route("/black", () => changeView("<h1>black页面</h1>"));
router.route("/404",() => changeView("<h1>404 请求的页面不存在</h1>"));
})()

以上就是hash路由的最简单。最基本的实现;

最终的效果如下;通过点击不同的按钮,触发url中hash部分的改变,改变页面

前端hash路由基本原理,及代码的基本实现的更多相关文章

  1. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  2. 对一致性Hash算法,Java代码实现的深入研究

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...

  3. Javascript实现前端简单路由

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  4. 告别 hash 路由,迎接 history 路由

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

  5. 对一致性Hash算法,Java代码实现的深入研究(转)

    转载:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读 ...

  6. 【转载】对一致性Hash算法,Java代码实现的深入研究

    原文地址:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细 ...

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

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

  8. HahsRouter hash 路由

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

  9. hash路由

    class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...

随机推荐

  1. 【LeetCode】128. 最长连续序列

    题目 给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为O(n). 示例: 输入:[100, 4, 200, 1, 3, 2] 输出:4 解释:最长连续序列是[1, 2, 3, ...

  2. oracle undo redo 解析

    Undo是干嘛用的?          简单理解,就相当于Windows下的回收站.        你对数据执行修改时,数据库会生成undo信息,这样万一你执行的事务或语句由于某种原因失败了,或者如果 ...

  3. 课程一(Neural Networks and Deep Learning),第三周(Shallow neural networks)—— 2、Practice Questions

    1.以下哪一项是正确的?(检查所有适用的) (A,D,F,G) A.  a[2] 表示第二层的激活函数值向量. B. X 是一个矩阵, 其中每一行都是一个训练示例. C. a[2] (12) 表示第二 ...

  4. JAVA面试精选【Java算法与编程一】

    在面试中,算法题目是必须的,通过算法能够看出一个程序员的编程思维,考察对复杂问题的设计与分析能力,对问题的严谨性都能够体现出来.算法是一系列解决问题的清晰指令,也就是说,能够对一定规范的输入,在有限时 ...

  5. 音频播放封装(pcm格式,Windows平台 c++)

    介绍 pcm格式是音频非压缩格式.如果要对音频文件播放,需要先转换为pcm格式. windows提供了多套函数用于播放,本文介绍Waveform Audio Functions系列函数. 原始的播放函 ...

  6. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  7. Inno Setup中多语言时,使用占位符填充

    如在: [CustomMessages] CreateDesktopIcon=Create a Desktop icon NameAndVersion=%1 version %2 普通的获取Custo ...

  8. Yarn和Mesos:资源管理调度平台

    目前得分布式系统中,对于资源管理都采用动态资源划分来取代静态资源划分.它有如下好处: 集群资源利用率高 增加数据共享能力,可以多种计算框架公用一份分布式存储数据. 资源管理抽象模型 概念模型 常见得资 ...

  9. 使用显式的Lock对象取代synchronized关键字进行同步

    Java SE5的java.util.concurrent类库还包含有定义在java.util.concurrent.locks中的显式的互斥机制.Lock对象必须被显式地创建.锁定和释放.因此,它与 ...

  10. Hibernate常出现的报错

    刚开始学习hibernate的时候,第一次就遇到了空指针异常,结果是我的配置文件处理错误(主要是数据库表的字段与就java实体类的属性名单词写错了):一般是报空指针异常的话,多半是配置文件的问题. 但 ...