项目总结-前端路由hash和history
router模块
路由需要实现的功能
- 当浏览器地址发生变化的时候，切换页面
- 点击浏览器后退前进的时候，网页内容发生变化
- 刷新浏览器，网页加载当前路由对应内容
路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式
- hash模式：监听浏览器地址hash地址的变化，执行相应的js切换网页
- history模式：利用history API实现url地址改变，网页内容改变。
history和hash模式
history
window.history属性指向history对象，表示当前窗口的浏览历史，当发生改变的时候，会改变页面的路径，不会刷新页面，history对象保存了当前窗口访问过的所有页面网址
- 通过
pushState,replaceState来实现无感刷新跳转的功能。
和hash的区别
https://github.com/xxx
https://github.com/xxx/yyy
https://github.com/xxx/yyy/zzz
正常的页面应该是全部发生刷新，但是使用history模式，只有第一个会发生刷新，后面只会发生前端跳转，不会刷新页面。
存在的问题
对于history来说，解决了不少hash存在的问题，但是也带来的新的问题
- 使用history模式的时候，对当前的页面进行刷新的时候，此时浏览器会重新发起请求，如果nignx没有匹配得到当前的url， 就会出现404的页面
- 对于hash模式，虽然是改变了URL,但是不会被包括在http请求中，所以算是被用来知道浏览器的动作，不会影响服务端，改变hash不会改变真正的url，所以页面路径还是之前的路径，nginx也不会被拦截
- 因此，在使用history模式的时候，需要通过服务器来允许地址访问，如果没有出现这个设置，就容易出现导致404的出现。
hash
hash是URL中hash(#)及后面的那部分，也称散列值，常用作锚点来在页面中进行导航，改变URL中的hash部分不会引起页面刷新，不会随着请求发送到服务器。
所有的页面的跳转都是在客户端进行操作的，改变hash值不算是一个http请求，当前模式不适合seo优化。hash只能修改#后面的部分，所以只能跳转到当前url同文档的url。
通过hashchange事件监听URL的变化，可以通过location.hash来获取和设置hash值，通过浏览器的前进和后退触发网页跳转。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><ul><!-- 定义路由 --><li><a href="#/home">home</a></li><li><a href="#/about">about</a></li><!-- 渲染路由对应的 UI --><div id="routeView"></div></ul></ul>
</body>
<script>let routerView = document.getElementById('routeView')window.addEventListener('hashchange', () => {routerView.innerHTML = location.hash})window.addEventListener('DOMContentLoaded', () => {if(!localtion.hash) {location.hash = "/"} else {let hash = location.hashrouterView.innerHTML = hash}})
</script>
</html>
![[职场] 公务员的利弊分析 #知识分享#经验分享#其他](https://img-blog.csdnimg.cn/img_convert/5bcd74cd751052a1172c6b8f5a4cf29a.png)
![B3996 [洛谷 202406GESP 模拟 三级] 小洛的数字游戏](/images/no-images.jpg)