前端如何监听路由的变化?如何根据前端路由
的变化,去操作相应的DOM
?
本文从前端层面上,大致解读一下,前端路由的监听与相关
DOM
操作的方法。
实现的基本原理:
- 首先,放置指定的
DOM
标识,- 其次,当锚点值(即:浏览器地址)改变将触发
hashchange
的回调函数,- 最后,根据前端路由的
switch
case匹配结果,将我们指定的模板数据text = 'xxx'
,插入到DOM
标识id = 'main'
中。
效果图预览:
首先我们看一下html代码
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS监视锚点值的改变</title>
<style>
div{height: 100px;}
.header{background-color: hotpink}
#main{background-color: yellowgreen}
.footer{background-color: skyblue}
</style>
</head>
<body>
<div class="header">我是头部</div>
<div id="main">主体</div>
<div class="footer">我是底部</div>
<script>
//第一步:监视锚点值的改变,
//第二步:往里面塞数据
window.addEventListener('hashchange',function(){
var text = '';
switch(location.hash){
case '#/music':
text = '各种音乐的数据';
break;
case '#/movie':
text = '各种电影的数据';
break;
}
document.getElementById('main').innerHTML = text;
})
</script>
</body>
</html>
对比了解一下
vue.js
的路由操作方式和DOM
操作办法。
以上就是对于‘前端路由的监听’方法的粗略说明,可作为
demo演示
,了解一下。