前端路由实现

简介

• 对于 Web 开发来说，路由的实质是 URL 到对应的处理程序的映射。
• 前端路由根据具体实现方式的不同，可以分为 Hash 路由 和 History 路由 两种，这两种实现方式各有其优势和局限性。

Hash 路由

一个 URI 的组成如下所示。其中的 fragment 部分就是 Hash 路由所读取的内容。

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment
      |   _____________________|__
     / \ /                        \
     urn:example:animal:ferret:nose

fragment 本质是用来标识次级资源，fragment 有以下特点：

• 修改 fragment 的内容不会触发网页重载。
• 修改 fragment 的内容会改变浏览器的历史记录。
• 修改 fragment 的内容会触发浏览器的 onhashchange 事件。
• 基于 fragment 的以上特点，可实现基于 Hash 的前端路由。

实现原理
我们可以通过监听 hashchange 事件来监听页面 hash 的变化，通过解析 hash 的值来切换页面。示例如下：

/**
 * 解析 hash
 * @param hash
 * @returns
 */
function parseHash(hash) {
  // 去除 # 号
  hash = hash.replace(/^#/, "");

  // 简单解析示例
  const parsed = hash.split("?");

  // 返回 hash 的 path 和 query
  return {
    pathname: parsed[0],
    search: parsed[1],
  };
}

/**
 * 监听 hash 变化
 * @returns
 */
function onHashChange() {
  // 解析 hash
  const { pathname, search } = parseHash(location.hash);

  // 切换页面内容
  switch (pathname) {
    case "/home":
      document.body.innerHTML = `Hello ${search}`;
      return;
    default:
      return;
  }
}

window.addEventListener("hashchange", onHashChange);

优缺点
Hash 路由由于通过监听 hash 变化实现，所以有以下优势和不足：

• 优点

  • 兼容性最佳。
  • 无需服务端配置。

• 缺点

  • 服务端无法获取 hash 部分内容。
  • 可能和锚点功能冲突。
  • SEO 不友好。

History 路由

• Hash 路由是一个相对“Hack”的方式，利用了 fragment 来实现路由功能。、
• History 路由则是通过浏览器原生提供的操作 History 的能力来实现的路由功能。

实现原理

History 路由核心主要依赖 History API 里的两个方法和一个事件，其中两个方法用于操作浏览器的历史记录，事件用于监听历史记录的切换

• 方法

  • history.pushState：将给定的 Data 添加到当前标签页的历史记录栈中。
  • history.replaceState：将给定的 Data 更新到历史记录栈中最新的一条记录中。

• 事件

  • popstate：监听历史记录的变化。

/**
 * 监听 history 变化
 * @returns
 */
function onHistoryChange() {
  // 解析 location
  const { pathname, search } = location;

  // 根据页面不同执行不同内容
  switch (pathname) {
    case "/home":
      document.body.innerHTML = `Hello ${search.replace(/^\?/, "")}`;
      return;
    default:
      document.body.innerHTML = `Hello World`;
      return;
  }
}

/**
 * 页面跳转
 * @returns
 */
function pushState(target) {
  history.pushState(null, "", target);
  onHistoryChange();
}

// 3 秒后路由跳转
setTimeout(() => {
  pushState("/home?name=HZFEStudio");
}, 3000);

// 6 秒后返回
setTimeout(() => {
  history.back();
}, 6000);

window.addEventListener("popstate", onHistoryChange);

优缺点
History 路由由于通过 History API 实现，所以有以下优势和不足：

• 优点

  • 服务端可获取完整的链接和参数。
  • 前端监控友好。
  • SEO 相对 Hash 路由友好。

• 缺点

  • 兼容性稍弱。
  • 需要服务端额外配置（各 path 均指向同一个 HTML）。

前端路由的优缺点
前端路由是前后端分离的开发模式的产物，对比服务端路由，前端路由的实现方式有以下优势和不足：

• 优点

  • 无刷新切换内容，用户体验更佳。
  • 减轻服务端压力。

• 缺点

  • 初次加载耗时长。
  • SEO 效果不佳。