前端实现路由的两种方式（hash和history）

前端实现路由主要有两种方式：
第一种：通过location.hash实现前端路由
hash是指url中#后面的部门，这部分在服务器会被自动忽略，但是在浏览器中可以通过location.hash来获取。此方式主要是用到了onhashchange事件，这个事件可以监听url中的hash值变化，以此来进行一些DOM的切换操作。
onhashchange事件的触发条件有:
a、改变url地址，在最后面增加或改变其hash值
b、改变location.href或location.hash
c、点击带有锚点的链接
d、浏览器前进后退可能导致hash的变化，就是两个网页地址中的hash值不同
实现思路：
当浏览器地址栏url的hash值发生变化时，就会触发onhashchange事件，这时需要通过window.location.hash可以拿到当前浏览器的url的hash值，此时的hash值是带有#的。可以根据不同的hash值执行不同的回调函数，即加载相应的组件。
实现方式：
当hash值发生变化会触发此事件
window.addEventListener(‘hashchange’,fn)

第二种：利用window.history实现前端路由
window对象都有一个history属性，用来保存用户访问过的页面列表，我们在浏览网页时的前进和后退都是由这个对象来实现的。
在用history实现前端路由的过程中，主要使用到了history.pushState()和history.replaceState()这两个接口。二者均接收三个参数，分别是state，title，url，state用来存放将要插入history实体的相关信息，是一个json格式的参数；title是传入history实体的标题，firefox现在会自动忽略掉这个属性；url用来传递新的history实体的相对路径，如果其值为null则表示当前要插入的history实体与前一个实体一致，没有改变。
两者唯一的区别在于replaceState()方法会将最新一条的history实体覆盖掉，而不是直接添加。
这两个方法都不会主动触发浏览器页面的刷新，只是history对象包括地址栏的内容会发生改变，当触发前进后退等history事件时才会进行相应的响应。
浏览器的前进后退会触发window.onpopstate事件，通过绑定 popstate事件，就可以根据当前url地址中的查询内容让对应的菜单执行ajax载入，实现ajax的前进和后退效果。
————————————————
版权声明：本文为CSDN博主「April Gemini」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42357338/article/details/108436182