前端路由是指通过 JavaScript 控制前端页面的切换和渲染，以实现单页应用（SPA）的用户交互效果。其中，Hash 模式和 History 模式是两种常用的实现方式。
Hash 模式的实现思路
Hash 模式的实现思路主要包括以下两个方面：
1.在 URL 中添加 hash 值
Hash模式的实现方式是在 URL 中添加一个 # 符号和一个 hash 值，例如：
<a href="#/home">子地址</a> //点击a标签进入http://xxx/#/home，其中href的值用hash表示,xxx表示域名
这个 hash 值可以通过 JavaScript 中的 location.hash 属性获取和设置。通过改变 hash 值，可以实现页面地址的切换。
2.监听 hashchange 事件
改完地址，还需要修改地址对应的页面内容，所以需要监听浏览器中的 hashchange 事件。当 hash 值改变时，可以通过事件监听器来触发对应的页面渲染操作，从而实现前端路由。
History 模式的实现思路
History 模式的实现思路主要包括以下两个方面：
1.使用 history.pushState() 方法
History 模式的实现方式是通过 JavaScript 中的 history.pushState(state, unused, url)方法来改变浏览器的历史记录。这个方法可以添加一个新的历史记录，并改变当前页面的 URL，例如：
history.pushState(null, null, '/home');
这个方法会在浏览器的历史记录中添加一个新的记录，并把当前的 URL 改变为 http://xxx/home
2.监听事件
为了实现在前端页面之间的切换，需要使用事件发布订阅。当用户点击页面跳转按钮时，会触发这个事件。通过事件监听器来获取新的历史记录并渲染对应的页面，从而实现前端路由。
Hash 模式和 History 模式的区别
Hash 模式和 History 模式的区别主要包括以下三个方面：
1.URL 格式不同
Hash 模式的 URL 中包含一个 # 符号和一个 hash 值，例如:http://xxx/#/home ；
History 模式的 URL 中不包含 # 符号，例如：http://xxx/home
2.对服务器的影响不同
Hash 模式不需要后端支持；
History 模式需要后端支持， URL 中的路径会被发送到服务器，因此需要在服务器端进行相应的配置，才能正常使用前端路由。
3.浏览器兼容性不同
Hash 模式的浏览器兼容性好，能支持ie6；
History模式则需要在一些旧版本的浏览器中进行特殊处理，以保证其正常运行。
总结
Hash 模式和 History 模式虽然实现方式不同,但都能在不用重新加载页面的情况下，达到地址和页面的切换，节省流量，增强用户的交互体验，使用户感觉更加流畅和自然。
