前端路由手写Hash和History两种模式

在现代Web开发中，单页面应用（Single Page Application，简称SPA）因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由作为SPA的核心技术之一，允许用户在不刷新整个页面的情况下，通过URL的变化来加载和切换不同的页面内容。本文将通过手写代码的方式，深入探讨前端路由的两种主流实现方式：Hash模式和History模式。

1. Hash模式：简洁而广泛适用

Hash模式利用URL的哈希（#之后的部分）来存储路由信息，由于哈希的变化不会触发完整的页面刷新，因此非常适合于实现SPA的前端路由。下面是一个使用Hash模式的手写路由实现示例：

<!-- HTML结构 -->
<nav id="nav">
    <ul>
        <li><a href="#/page1">Page 1</a></li>
        <li><a href="#/page2">Page 2</a></li>
    </ul>
</nav>
<div id="content"></div>

class HashRouter {
   
   
    constructor() {
   
   
        this.routes = {
   
   };
        window.addEventListener('hashchange', this.load.