介绍 <李> <李> & lt; body>
& lt;才能ul>
ref=?“在,,,,& lt; !——,定义路由,——比;
,,,& lt; li> & lt; https://www.yisu.com/zixun/a href=" #/home " rel="外部nofollow”> 回家
<李> 对
ref=" ">
//,页面加载完不会触发,hashchange,这里主动触发一次,hashchange 事件
window.addEventListener (& # 39; DOMContentLoaded& # 39;,, onLoad)//,监听路由变化
window.addEventListener (& # 39; hashchange& # 39;,, onHashChange)
,//,路由视图
var routerView =零
,
function onLoad (), {
时间=routerView 才能;document.querySelector (& # 39; # routeView& # 39;)
onHashChange才能()
}
,//,路由变化时,根据路由渲染对应,UI
function onHashChange (), {
switch 才能;(location.hash), {
,,,case & # 39; #/回家# 39;:
,,,,,routerView.innerHTML =, & # 39;回家# 39;
,,,,,回来
,,,case & # 39; #/约# 39;:
,,,,,routerView.innerHTML =, & # 39;关于# 39;
,,,,,回来
,,,默认值:
,,,,,回来
,,}
} & lt; body>
& lt;才能ul>
,,,& lt; li> & lt; a href=https://www.yisu.com/zixun/的/home> 回家
<李> 对
//,页面加载完不会触发,hashchange,这里主动触发一次,hashchange 事件
window.addEventListener (& # 39; DOMContentLoaded& # 39;,, onLoad)//,监听路由变化
window.addEventListener (& # 39; popstate& # 39;,, onPopState)
,//,路由视图
var routerView =零
,
function onLoad (), {
时间=routerView 才能;document.querySelector (& # 39; # routeView& # 39;)
onPopState才能()
,
https://www.yisu.com/zixun/, href=" ">//拦截<一>标签点击事件默认行为,点击时使用pushState修改URL并更新手动UI,从而实现点击链接更新URL和UI的效果。
var linkList=document.querySelectorAll (“(href)”)
linkList。forEach (el=> el。addEventListener(“点击”,函数(e) {
e.preventDefault ()
历史。pushState (el.getAttribute null,”(“href”))
onPopState ()
}))
}//路由变化时,根据路由渲染对应的UI
函数onPopState () {
开关(location.pathname) {
例“/home”:
routerView。innerHTML='家'
返回
案例/有关的:
routerView。innerHTML='对'
返回
默认值:
返回
}
}
这篇文章给大家分享的是有关反应如何实现浏览器自动刷新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
什么是前端路由?
路由的概念来源于服务端,在服务端中路由描述的是URL与处理函数之间的映射关系。
在网络前端单页应用SPA(单页面应用程序)中,路由描述的是URL与UI之间的映射关系,这种映射是单向的,即URL变化引起UI更新(无需刷新页面)。
如何实现前端路由?
要实现前端路由,需要解决两个核心问题:
如何改变URL却不引起页面刷新?如何检测URL变化了?
下面分别使用散列和历史两种实现方式回答上面的两个核心问题。
哈希实现
中哈希散列是URL(<代码> #> <李>
通过hashchange事件监听URL的变化,改变URL的方式只有这几种:通过浏览器前进后退改变URL,通过<代码>标签改变URL,通过风噢。位置改变URL,这几种情况改变URL都会触发hashchange事件
历史实现
历史提供了pushState和replaceState两个方法,这两个方法改变URL的路径部分不会引起页面刷新
<李>历史提供类似hashchange事件的popstate事件,但popstate事件有些不同:通过浏览器前进后退改变URL时会触发popstate事件,通过<代码> pushState/replaceState> 件。好在我们可以拦截pushState/r eplaceState的调用和标签的点击事件来检测URL变化,所以监听URL变化可以实现,只是没有hashchange那么方便。
,原生JS版前端路由实现
基于上节讨论的两种实现方式,分别实现哈希版本和历史版本的路,由示例使用原生HTML/JS实现,不依赖任何框架。
基于哈希实现
运行效果:
HTML部分:
JavaScript部分:
基于历史上实现
运行效果:
HTML部分:
JavaScript部分:
