SPA单页面原理简单例子演示

Amodoro

已于 2023-02-02 17:00:41 修改

阅读量172

点赞数

分类专栏：笔记文章标签： javascript 前端 vue.js

于 2023-02-02 16:54:01 首次发布

本文链接：https://blog.csdn.net/qq_40230735/article/details/128853367

版权

笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

hash模式

编辑浏览器地址栏看效果，可以添加#a、#b或者#c

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div {
			display: none;
		}
		.a {
			display: block;
		}
	</style>
</head>
<body>
	<div id="a" class="a">a</div>
	<div id="b" class="b">b</div>
	<div id="c" class="c">c</div>
</body>
<script>
	function hashchange (hashEvt) {
    console.log(hashEvt)
		const newHashVal = hashEvt.newURL.split('#')[1]
		const oldHashVal = hashEvt.oldURL.split('#')[1] || 'a'
		document.getElementById(newHashVal).style.display = 'block'
		document.getElementById(oldHashVal).style.display = 'none'
  }

  window.addEventListener('hashchange', hashchange)
</script>
</html>

H5 history

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<a class="api">a.html</a>
<a class="api">b.html</a>
</body>
<script>
	document.querySelectorAll('.api').forEach(item => {
    item.addEventListener('click', (e) => {
			e.preventDefault()
			if (!!(window.history && window.history.pushState)) {
        const link = item.textContent
        history.pushState({name: 'api'}, link, link)
			}
		}, false)
  })

  window.addEventListener('popstate', e => {
    console.log({
      location: location.href,
      state: e.state
    })
  }, false)
</script>
</html>