前端路由实现

大莲芒

于 2024-07-16 20:29:25 发布

阅读量281

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_34574204/article/details/140475511

版权

简介

对于 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);