location hash属性、hash+原生JavaScript实现前端路由

最新推荐文章于 2023-07-07 13:32:46 发布

追求～

最新推荐文章于 2023-07-07 13:32:46 发布

阅读量390

点赞数

分类专栏： JavaScript 文章标签：哈希算法前端 javascript

本文链接：https://blog.csdn.net/m0_63348818/article/details/125709453

版权

JavaScript 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

文章目录

1.hash

1.hash定义和用法

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

2.hash语法

location.hash

例如：假如当前URL为 http://www.127.0.0.1:8000/index.html#123456
那么输出location.hash的就是**#123456**

2.hash实现前端路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hash实现前端路由</title>
	</head>
	<body>
		<ul>
			<li><a href="#/aaa">aaa</a></li>
			<li><a href="#/bbb">bbb</a></li>
			<li><a href="#/ccc">ccc</a></li>
			<li><a href="#/ddd">ddd</a></li>
			<li><a href="#/eee">eee</a></li>
		</ul>
		<div id="div"></div>
	</body>
</html>

<script type="text/javascript">
	window.onhashchange = function() {
		var hash = location.hash;
	     hash = hash.replace('#','');
		switch(hash) {
			case '/aaa':
			document.getElementById('div').innerHTML = 'AAAA';
			break;
			case '/bbb':
			document.getElementById('div').innerHTML ='BBBB';
			break;
			case '/ccc':
			document.getElementById('div').innerHTML = 'CCCC';
			break;
			case '/ccc':
			document.getElementById('div').innerHTML = 'CCCC';
			break;
			case '/ddd':
			document.getElementById('div').innerHTML = 'DDDD';
			break;
			default:
			document.getElementById('div').innerHTML = 'EEEE';
			break;
		}
	}
</script>

由此可以实现前端路由，实现切换效果。

追求～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
location hash属性、hash+原生JavaScript实现前端路由

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。例如：假如当前URL为那么输出的就是**#123456**由此可以实现前端路由，实现切换效果。
复制链接

扫一扫