前端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 ...
随机推荐
- [LeetCode] 反转整数
题目: 给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注 ...
- 3DMax——基础
1.首次打开3DMAX设置单位: 自定义→单位设置→①系统单位设置→1单位=1.0毫米:②公制→毫米 注:室内单位为毫米,室外单位为米 2.从CAD导出可以导入到3DMAX的文件: 选中要导出的部分→ ...
- numpy.squeeze()的用法
import numpy as np x = np.array([[[0], [1], [2]]]) print(x) """x= [[[0] [1] [2]]] &qu ...
- (转) argparse — 解析命令参数和选项
原文地址:https://pythoncaff.com/docs/pymotw/argparse-command-line-option-and-argument-parsing/166 https: ...
- JDK7与JDK8中HashMap的实现
JDK7中的HashMap HashMap底层维护一个数组,数组中的每一项都是一个Entry transient Entry<K,V>[] table; 我们向 HashMap 中所放置的 ...
- 玩转mongodb（七）：索引，速度的引领（全文索引、地理空间索引）
本篇博文主要介绍MongoDB中一些常用的特殊索引类型,主要包括: 用于简单字符串搜索的全文本索引: 用于球体空间(2dsphere)和二维平面(2d)的地理空间索引. 一.全文索引 MongoDB有 ...
- 136 Ugly Numbers(priority_queue+逆向求解要求数)
题目链接: https://cn.vjudge.net/problem/UVA-136 /*问题 输出第1500个丑数,丑数的定义是不能被2,3,5以外的其他素数整除的数 解题思路 直接硬暴力先试一下 ...
- 数字三角形 （简单DP）
问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸的美国.美国人民的生活非常有意思,经常会有形形色色.奇奇怪怪的活动举办,这不,小Hi和小Ho刚刚下飞 ...
- [九省联考2018] 一双木棋 chess
Description 菲菲和牛牛在一块n 行m 列的棋盘上下棋,菲菲执黑棋先手,牛牛执白棋后手. 棋局开始时,棋盘上没有任何棋子,两人轮流在格子上落子,直到填满棋盘时结束. 落子的规则是:一个格子可 ...
- flink-vs.-spark
这段时间,开始学习Flink,并了解了Spark与Flink的区别,开始觉得Flink大有取代Spark的趋势啊,实时流始终目前是Spark的瓶颈呀,下面来一张对比图: 图片来源于:https://j ...