项目总结-前端路由hash和history

本文主要是介绍项目总结-前端路由hash和history，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目总结-前端路由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>