模拟单页面应用程序（SPA）

a标签的锚点值是用来实现：页面内部跳转

  • 1 ajax
  • 2 哈希值（锚点）的使用（window.location.hash #）
  • 3 hashchange 事件
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			height: 500px;
			width: 100%;
			background-color: hotpink;
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<a href="#/find">发现音乐</a>
		</li>
		<li>
			<a href="#/my">我的音乐</a>
		</li>
		<li>
			<a href="#/friend">朋友</a>
		</li>
	</ul>

	<div id="content">
		<!-- 这是内容区域 -->
	</div>

	<script src="./node_modules/axios/dist/axios.js"></script>
	<script type="text/javascript">
		// 进入页面，就触发这个函数来获取当前哈希值对应的内容
		handlerChange()

		window.addEventListener('hashchange', handlerChange)

		function handlerChange() {
			// console.log('哈希值改变了', location.hash)
			switch (location.hash) {
				case '#/friend':
					axios.get('./friend.json').then(res => {
						console.log(res)
						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
					})
					break;

				case '#/my':
					axios.get('./my.json').then(res => {
						console.log(res)
						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
					})
					break;

				case '#/find':
					axios.get('./find.json').then(res => {
						console.log(res)
						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
					})
					break;
			}
		}
	</script>
</body>

</html>
posted @ 2019-03-14 11:24  木石天涯  阅读(277)  评论(0)    收藏  举报