项目总结-前端路由hash和history
router模块
路由中必须实现的功能
当浏览器地址改变时，你切换页面，点击浏览器来回，网页内容发生变化，当你刷新浏览器时，网页加载当前路由对应的内容。
路由主要是监听事件并使用JS动态改变网页的内容。有两种方法可以实现它。
哈希模式：观察浏览器地址的哈希地址变化，执行相应的js来切换网页。 历史记录模式：使用历史记录API 更改URL 地址和网页内容。
history和hash模式
history
window.history属性指向一个history对象，表示当前窗口的浏览历史记录。发生更改时，页面的路径会更改，并且页面不会更新所有页面的URL。当前窗口已访问。
使用pushState和replaceState实现非敏感刷新跳转功能。
和hash的区别
https://github.com/xxx
https://github.com/xxx/yyy
https://github.com/xxx/yyy/zzz
正常情况下所有页面都应该刷新，但是历史模式下只刷新第一页，之后就只有前端跳转，不再刷新任何页面。
存在的问题
从历史来看，哈希在解决许多问题的同时，也产生了新的问题。
使用历史模式时，刷新当前页面时，如果nignx与当前URL不匹配，则不会显示404页面，即使URL已更改。由于hash包含在http请求中，因此它用于了解浏览器在做什么，对服务器没有影响。所以页面路径会保持之前的路径，nginx不会拦截。如果使用历史模式，必须允许通过服务器进行地址访问。如果此设置不可见，则更有可能发生404。
hash
哈希值是URL 中的哈希值(#) 及其后面的内容，也称为哈希值。更改URL 的哈希部分不会更新页面。它不会发送到请求服务器。
所有页面跳转均在客户端进行。目前的模式不适合SEO优化。只能更改hash中#后面的部分，因此只能跳转到与当前URL相同文档的URL。
它通过hashchange事件监听URL变化，通过location.hash获取和设置哈希值，通过浏览器来回移动触发网页跳转。
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题文件/标题
/头
身体
乌尔
乌尔
!– 定义路线–
lia href=\’#/home\’home/a/li
lia href=\’#/about\’about/a/li
!– 渲染路由对应的UI —
div id=\’routeView\’/div
/ul
/ul
/身体
脚本
让routerView=document.getElementById(\’routeView\’)
window.addEventListener(\’hashchange\’, ()={
routerView.innerHTML=位置.hash
})
window.addEventListener(\’DOMContentLoaded\’, ()={
if(!localtion.hash) {
位置.hash=\’/\’
} 除此之外{
让hash=位置.hash
routerView.innerHTML=散列
}
})
/剧本
/html
以上#ProjectOverview相关内容摘自网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91790.html
