第十二讲===>路由的跳转原理（哈希模式）

  • 单页应用的路由模式有两种

    • 哈希模式（利用hashchange 事件监听 url的hash 的改变）
    • history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）

  • 哈希模式原理

window.addEventListener('hashchange', function(e) {
  console.log(e)
})

核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="#/login">登录</a>
	|
	<a href="#/register">注册</a>
	<div id="app"></div>

	<script type="text/javascript">
		var appdiv=document.getElementById('app')

		window.addEventListener('hashchange', function(e) {
			  console.log(location.hash)
			  switch(location.hash){
			  	case '#/login':
			  	appdiv.innerHTML='我是登录页面';
			  	break;
			  	case '#/register':
			  	appdiv.innerHTML='我是注册页面';
			  	break;
			  }
			})
	</script>
</body>
</html>
posted @ 2020-03-27 21:17  xl4ng  阅读(565)  评论(0)  编辑  收藏  举报