Hash和History如何实现路由

如今，Vue、React和Angular等前端框架都提供了路由插件，这些插件通常提供两种不同的路由方式：Hash和History。本文将围绕这两种方式，通过原生JavaScript手写一个简单的路由，以帮助您理解路由的底层原理。

Hash模式

Hash模式是使用URL的哈希部分来实现路由。哈希部分是指URL中井号(#)后面的部分。当使用Hash模式时，路由器会监听URL哈希部分的变化，并根据变化来加载不同的页面。

Hash模式的优点是简单易用，兼容性好，即使是在不支持HTML5 History API的浏览器中也可以使用。缺点是URL哈希部分会影响页面的URL，可能会导致书签和链接问题。

History模式

History模式是使用HTML5 History API来实现路由。History API提供了两个新的方法：pushState()和replaceState()。这两个方法可以用来修改浏览器的历史记录，从而实现页面的跳转。

History模式的优点是不影响URL哈希部分，不会导致书签和链接问题。缺点是需要浏览器支持HTML5 History API，兼容性不如Hash模式好。

原生JavaScript实现的路由

下面我们来使用原生JavaScript实现一个简单的路由。这个路由将使用Hash模式，因为Hash模式的兼容性更好。

// 创建一个路由器对象
const router = {
  // 路由表
  routes: [],

  // 添加路由
  addRoute(path, component) {
    this.routes.push({ path, component });
  },

  // 路由匹配
  match(path) {
    for (const route of this.routes) {
      if (route.path === path) {
        return route;
      }
    }

    return null;
  },

  // 路由导航
  navigate(path) {
    const route = this.match(path);

    if (route) {
      // 加载组件
      const component = new route.component();

      // 渲染组件
      document.getElementById('app').appendChild(component.render());
    } else {
      // 路由未找到
      console.error(`Route not found: ${path}`);
    }
  },
};

// 添加一些路由
router.addRoute('/', HomeComponent);
router.addRoute('/about', AboutComponent);
router.addRoute('/contact', ContactComponent);

// 监听URL哈希部分的变化
window.addEventListener('hashchange', () => {
  const path = window.location.hash.slice(1);
  router.navigate(path);
});

// 初始导航
router.navigate(window.location.hash.slice(1));

以上就是使用原生JavaScript实现的简单路由。这个路由器可以用来加载不同的页面，并根据URL哈希部分的变化来切换页面。