前端路由的原生代码实现?前端如何监听路由变化

前端如何监听路由的变化?如何根据前端路由的变化,去操作相应的DOM?


本文从前端层面上,大致解读一下,前端路由的监听与相关DOM操作的方法。
实现的基本原理:
首先,放置指定的DOM标识,
其次,当锚点值(即:浏览器地址)改变将触发hashchange的回调函数,
最后,根据前端路由的switch case匹配结果,将我们指定的模板数据text = 'xxx',插入到DOM标识id = 'main'中。
效果图预览:

前端路由的原生代码实现?前端如何监听路由变化

首先我们看一下html代码:




<title>JS监视锚点值的改变/<title>



我是头部

主体





对比了解一下vue.js的路由操作方式和DOM操作办法。
以上就是对于‘前端路由的监听’方法的粗略说明,可作为demo演示,了解一下。


分享到:


相關文章: