前端hash路由基本原理,及代码的基本实现
路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。
早期的路由都是后端实现的，直接根据 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等操作。实现页面的改变
下面代码展示
<!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路由基本原理,及代码的基本实现的更多相关文章
- H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- 对一致性Hash算法，Java代码实现的深入研究
一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...
- Javascript实现前端简单路由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
- 告别 hash 路由，迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- 对一致性Hash算法，Java代码实现的深入研究(转)
转载:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读 ...
- 【转载】对一致性Hash算法，Java代码实现的深入研究
原文地址:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细 ...
- React SPA 应用 hash 路由如何使用锚点
当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...
- HahsRouter hash 路由
无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...
- hash路由
class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...
随机推荐
- flask框架--cookie，session
今天我又给大家分享一下怎么用flask框架来实现像淘宝购物车一样存储数据,并且把存储的数据删除,这个方法可以用两个方法都可以做成,一个是cookie,另一个是session. session是依赖于c ...
- Hadoop和Apache Spark的异同
谈到大数据,相信大家对Hadoop和Apache Spark这两个名字并不陌生.但我们往往对它们的理解只是提留在字面上,并没有对它们进行深入的思考,下面不妨跟我一块看下它们究竟有什么异同. 1.解决问 ...
- 执行bin/hdfs haadmin -transitionToActive nn1时出现，Automatic failover is enabled for NameNode at bigdata-pro02.kfk.com/192.168.80.152:8020 Refusing to manually manage HA state的解决办法（图文详解）
不多说,直接上干货! 首先, 那么,你也许,第一感觉,是想到的是 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 这里,nn1,不多赘述了.很简 ...
- 面试题----gcc的编译流程
gcc编译流程 一. 编译与处理指令: gcc -E hello.c -o a.c 如果不使用-o指定输出的文件,会默认输出到终端.所以建议使用同时使用-o选项. 还要注意:编译时会保留#pra ...
- java中类的加载顺序介绍(ClassLoader)
转自:http://blog.csdn.net/eff666/article/details/52203406 1.ClassNotFoundExcetpion 我们在开发中,经常可以遇见java. ...
- Spark2.1.0——深入浅出度量系统
Spark2.1.0--深入浅出度量系统 对于一个系统而言,首先考虑要满足一些业务场景,并实现功能.随着系统功能越来越多,代码量级越来越高,系统的可维护性.可测试性.性能都会成为新的挑战,这时监控功能 ...
- ArcGIS紧凑型切片读取与应用2-webgis动态加载紧凑型切片(附源码)
1.前言 上篇主要讲了一下紧凑型切片的的解析逻辑,这一篇主要讲一下使用openlayers动态加载紧凑型切片的web地图服务. 2.代码实现 上篇已经可以通过切片的x.y.z得对应的切片图片,现在使用 ...
- RecyclerView 使用指南
最近看了很多 RecyclerView 的使用文章,一直晕乎乎的,完全不知道套路是啥.很多人都是直接上代码,但是却没有详细说明代码的使用,于是打算自己写写,理理思路.顺便帮助那些正在学习 Androi ...
- PHP函数array_merge
今天因一个Bug重新审视了下array_merge()这个函数. 定义:array_merge — 合并一个或多个数组 规范:array array_merge(array $array1 [, ar ...
- 深入出不来nodejs源码-内置模块引入再探
我发现每次细看源码都能发现我之前写的一些东西是错误的,去改掉吧,又很不协调,不改吧,看着又脑阔疼…… 所以,这一节再探,是对之前一些说法的纠正,另外再缝缝补补一些新的内容. 错误在哪呢?在之前的初探中 ...