前端路由的底层逻辑：URL 中 # 和 ? 的区别与关系详解

随便的名字2026-05-30 10:23

引言

在前端单页应用（SPA）开发中，路由管理是核心功能之一。它允许我们在不刷新整个页面的情况下，通过改变 URL 来切换视图和内容。URL 中的 #（哈希）和 ?（查询参数）是实现前端路由的两种关键机制，它们有着不同的底层逻辑、用途和浏览器行为。理解它们的区别与联系，是掌握现代前端路由库（如 Vue Router, React Router）工作原理的基础。本文将深入剖析 # 和 ? 在前端路由中的角色、实现原理以及最佳实践。

1. URL 结构回顾：# 和 ? 的位置与作用

一个完整的 URL 可能包含以下部分：

复制代码 
https://www.example.com:8080/path/to/page?name=value&key=value#section-id
\___/   \_____________/ \__/\___________/ \_____________/ \_________/
协议       主机名        端口     路径        查询字符串        片段标识符

  • ? (查询字符串 Query String):

    • 位置：位于路径（path）之后，哈希（fragment）之前。
    • 作用 ：用于向服务器传递参数。格式为 ?key1=value1&key2=value2。
    • 服务器可见性 ：是。查询字符串会作为 HTTP 请求的一部分发送到服务器。
    • 浏览器行为 ：改变查询字符串（即使只是值的变化）通常会触发页面向服务器发起新的请求（除非被前端代码拦截）。

  • # (哈希 / 片段标识符 Fragment Identifier):

    • 位置：位于 URL 的最末尾，查询字符串之后。
    • 作用 ：
      1. 传统用途 ：指向页面内的一个锚点（anchor），浏览器会滚动到该 id 元素的位置。
      2. 前端路由核心 ：在 SPA 中，# 后面的内容（即 hash）变化不会触发页面刷新或向服务器发送请求。
    • 服务器可见性 ：否 。# 及其后面的内容不会 被发送到服务器。例如，对于 https://example.com/page#section1，服务器只会收到 /page 的请求。
    • 浏览器行为 ：改变 # 后面的部分，浏览器不会重新加载页面，但会记录到历史记录中，并触发 hashchange 事件。

2. 基于 # 的路由（Hash Routing）

2.1 核心原理

Hash Routing 利用 URL 中 # 后面的哈希部分来模拟不同的"路径"。例如：

  • https://example.com/#/home
  • https://example.com/#/about
  • https://example.com/#/user/123

当哈希部分 (/home, /about) 变化时：

  1. 页面不刷新：这是最关键的特性，实现了 SPA 的无刷新跳转体验。
  2. 触发 hashchange 事件 ：浏览器提供了 window.onhashchange 事件，前端路由库监听此事件。
  3. 路由库响应 ：路由库在 hashchange 事件触发后，解析新的哈希值，匹配预先定义的路由规则，然后动态地渲染对应的组件，并更新页面内容。

2.2 实现一个极简 Hash Router

javascript 复制代码 
// 1. 定义路由表
const routes = {
  '/home': '<h1>首页</h1><p>欢迎来到首页！</p>',
  '/about': '<h1>关于我们</h1>',
  '/user/:id': (id) => `<h1>用户页面</h1><p>用户ID是：${id}</p>`
};

// 2. 路由匹配函数
function matchRoute(hash) {
  // 去掉开头的 # 或 #/
  const path = hash.replace(/^#\/?/, '') || '/home';

  // 简单路径匹配
  if (routes[path]) {
    return typeof routes[path] === 'function' ? routes[path]() : routes[path];
  }

  // 动态路由匹配 (如 /user/123)
  for (const routeKey in routes) {
    if (routeKey.includes(':')) {
      const pattern = new RegExp('^' + routeKey.replace(/:\w+/g, '([^/]+)') + '$');
      const match = path.match(pattern);
      if (match) {
        const handler = routes[routeKey];
        return typeof handler === 'function' ? handler(match[1]) : handler;
      }
    }
  }

  return '<h1>404 - 页面未找到</h1>';
}

// 3. 渲染函数
function render() {
  const contentDiv = document.getElementById('app');
  const html = matchRoute(window.location.hash);
  contentDiv.innerHTML = html;
}

// 4. 初始化及监听 hashchange 事件
window.addEventListener('DOMContentLoaded', render);
window.addEventListener('hashchange', render);

// 5. 提供导航方法（非必须，但更友好）
function navigateTo(hash) {
  window.location.hash = `#/${hash}`;
}

2.3 优点与缺点

优点：

  • 兼容性极佳：在所有浏览器中都能完美工作，无需服务器配置。
  • 部署简单 ：SPA 可以部署在任何静态文件服务器上，因为所有 # 后的路由都会指向同一个入口文件（如 index.html）。

缺点：

  • URL 不美观 ：# 在 URL 中看起来像是一个" hack "。
  • SEO 不友好：虽然现代搜索引擎（如 Google）已能抓取哈希内容，但不如传统 URL 直接。
  • 服务器无法感知路由 ：由于 # 后的内容不发送到服务器，服务器端无法根据不同的哈希值进行差异化处理（如 SSR）。

3. 基于 ? 的查询参数（Query Parameters）

3.1 核心原理

查询参数主要用于在同一视图下传递状态或过滤条件。例如：

  • https://example.com/search?q=javascript&sort=date
  • https://example.com/user/profile?tab=settings

重要区别 ：单纯改变 ? 后面的查询字符串，浏览器默认行为是向服务器发起一个新的 GET 请求 。但在 SPA 中，我们通过 history.pushState() 或 replaceState() API 来改变 URL（包括查询字符串）而不触发页面刷新，并同时手动更新页面状态。

3.2 在路由中处理查询参数

现代路由库（无论是 Hash 模式还是 History 模式）都提供了便捷的方式来获取查询参数。

javascript 复制代码 
// 假设当前 URL 是：https://example.com/#/search?q=vue&page=2

// 使用 Vue Router (在组件内)
export default {
  mounted() {
    // 获取查询参数对象
    console.log(this.$route.query); // { q: 'vue', page: '2' }
    // 获取单个参数
    const searchQuery = this.$route.query.q; // 'vue'
    const currentPage = parseInt(this.$route.query.page) || 1; // 2
  },
  methods: {
    updateQuery() {
      // 导航并更新查询参数，不会刷新页面
      this.$router.push({ path: '/search', query: { q: 'react', page: 3 } });
      // URL 变为：https://example.com/#/search?q=react&page=3
    }
  }
};

// 使用 React Router v6
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q'); // 'vue'
  const page = searchParams.get('page'); // '2'

  const updateQuery = () => {
    setSearchParams({ q: 'react', page: '3' });
  };

  return (
    // ... JSX
  );
}

3.3 与路由路径的关系

  • 路径（Path） ：定义了"你在哪个页面"，如 /user, /product。
  • 查询参数（Query） ：定义了"这个页面的当前状态是什么"，如 ?id=123&mode=edit。

它们通常结合使用：/user?action=edit&id=456 表示"在用户页面，进行编辑 ID 为 456 的用户的操作"。

4. 现代方案：History API 路由（基于 / 的路径）

为了克服 Hash 模式 URL 不美观和 SEO 的问题，HTML5 引入了 History API (pushState, replaceState, popstate 事件)，催生了 History 路由模式。

4.1 核心原理

History 路由使用真实的 URL 路径，如：

  • https://example.com/home
  • https://example.com/about
  • https://example.com/user/123

通过 history.pushState() 改变浏览器地址栏的 URL（路径），但不发起请求 ；然后前端路由库根据这个新路径来渲染对应组件。当用户点击浏览器前进/后退按钮时，会触发 popstate 事件，路由库据此更新视图。

4.2 与 ? 和 # 的共存

在 History 模式下，? 和 # 依然保留其原有语义：

  • https://example.com/user/123?tab=profile#address
    • 路径 (Path) : /user/123
    • 查询参数 (Query) : ?tab=profile
    • 哈希 (Hash) : #address (此时哈希回归其"页面内锚点"的本职)

4.3 服务器端配置要求

History 模式需要一个关键的服务器配置：对于所有前端路由的路径，服务器都应返回同一个入口文件（如 index.html） 。否则，当用户直接访问 https://example.com/about 或刷新页面时，服务器会返回 404。

以 Nginx 为例：

nginx 复制代码 
location / {
  try_files $uri $uri/ /index.html;
}

5. # 和 ? 的关系与选择总结

特性 # (Hash) ? (Query String) History API (/)
是否触发页面刷新 否 (核心优势) 默认是，但可通过 History API 避免 否 (通过 pushState)
是否发送到服务器 否 是 是 (路径部分)
主要用途 1. 传统锚点 2. Hash 路由 传递参数/状态 美观的路径路由
兼容性 所有浏览器 所有浏览器 IE 10+
SEO 一般 对参数敏感 友好
部署复杂度 简单 (纯静态) 简单 需要服务器配置
示例 (SPA中) #/dashboard ?page=2&filter=active /dashboard

5.1 如何选择？

  1. 追求极致兼容性和简单部署 ：选择 Hash 模式。适用于内部系统、对 URL 美观度要求不高的项目。
  2. 追求美观 URL 和更好 SEO ：选择 History 模式。适用于面向公众的网站，且你能够控制服务器配置。
  3. ? 查询参数的使用 ：在任何一种路由模式 （Hash 或 History）中，都使用 ? 来传递可选的状态、过滤条件、分页信息等。它与路由路径是互补关系。

5.2 核心关系

  • # 和 ? 是 URL 中不同位置的两种参数 ，功能不同，可以同时存在：/path?query=1#hash。
  • 在 Hash 路由 中，# 被用来承载路径信息 （模拟 /home），而 ? 则用来承载该路径下的状态参数。
  • 在 History 路由 中，路径信息由真实的路径 (/) 部分承载，# 回归其页面锚点功能，? 依然用于承载查询参数。

6. 实战：在 Vue Router 中混合使用

javascript 复制代码 
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  // 使用 History 模式
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: UserComponent,
      // 路由守卫中处理查询参数
      beforeEnter(to, from) {
        const userId = to.params.id;
        const action = to.query.action; // 获取查询参数，如 ?action=edit
        if (action === 'edit' && !userHasEditPermission(userId)) {
          return { path: '/forbidden' };
        }
      }
    },
    {
      path: '/search',
      component: SearchComponent
      // 组件内通过 `route.query.q` 获取搜索关键词
    }
  ]
});

// 在组件中导航
// 1. 跳转到用户页面，并附带查询参数
router.push({ path: '/user/123', query: { tab: 'profile', modal: 'open' } });
// URL 变为：https://example.com/user/123?tab=profile&modal=open

// 2. 跳转时同时使用查询参数和哈希（锚点）
router.push({ path: '/document', query: { version: '2.0' }, hash: '#section-5' });
// URL 变为：https://example.com/document?version=2.0#section-5

7. 对比总结：? 和 # 的解析规则

为了更清晰地理解不同模式下 ? 和 # 的解析逻辑，下表总结了关键差异：

模式 / 规则 URL 示例 ? 和 # 的关系 谁来解析 ? 后的参数
标准 URL 规则 http://a.com/path?query=1#section ? 在 # 前面 后端服务器 接收并解析
Vue/React (Hash 模式) http://a.com/#/path?query=1 # 在 ? 前面 前端框架 拦截哈希值后二次解析
Vue/React (History 模式) http://a.com/path?query=1 没有 # 号（或 # 仅作锚点） 前端/后端 均可直接读取

核心要点解析：

  1. 标准 URL 规则 ：?query 位于 #hash 之前。整个查询字符串 ?query=1 会随请求发送到服务器，由后端 （如 Node.js、Java、PHP）进行解析。#section 作为片段标识符，不会发送到服务器。
  2. Hash 模式 ：URL 结构变为 #/path?query=1。此时 # 包含了路径和查询参数，整个 # 后面的内容（/path?query=1）作为一个字符串被前端路由库捕获（通过 hashchange 事件）。路由库需要自己解析 这个字符串，从中分离出路径 (/path) 和查询参数 (query=1)。
  3. History 模式 ：URL 恢复为标准形式 path?query=1。查询字符串 ?query=1 会正常发送到服务器，因此后端可以解析 。同时，前端路由库（通过 history.pushState 和 popstate 事件）也能直接读取 window.location.search 来获取查询参数，因此前端也可以解析 。此时 # 如果存在，通常只用作页面内锚点。

这个对比清晰地展示了：路由模式的选择，直接决定了 ? 和 # 在 URL 中的位置关系，以及参数由谁（前端还是后端）来主导解析。

结语

理解 # 和 ? 在前端路由中的角色，本质上是理解浏览器 URL 机制与 SPA 无刷新导航需求如何结合。# 凭借其"不触发请求"的特性，成为了早期 SPA 路由的基石；而 ? 则始终是传递动态参数的通用方式。随着 History API 的普及，我们可以使用更优雅的路径式路由，但 ? 和 # 的原始功能依然不可或缺。在实际开发中，根据项目需求（兼容性、SEO、美观度）选择合适路由模式，并合理运用查询参数和哈希，是构建良好用户体验的关键。

相关推荐
kongba0071 小时前
ttyd Web终端安装指南（OpenCloudOS 9）
linux·前端
zhoumeina991 小时前
前端串行合成流程 + 每张图上传接口
前端·状态模式
风骏时光牛马1 小时前
Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
前端
就叫_这个吧2 小时前
JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用
开发语言·前端·javascript
作业逆流成河2 小时前
别再一次性重构枚举了：如何把一个真实后台项目的状态字典，渐进式迁移到enum-plus？
前端·javascript·开源
暗不需求2 小时前
React 性能优化秘籍：深入理解 `useMemo` 与 `useCallback`
前端·react.js·面试
专注VB编程开发20年2 小时前
我制作excel工作簿的选项卡，发给deep seek， 昨天修改了一天
前端·vue.js·excel
light blue bird2 小时前
工序路径主子表单工序组装图表组件
前端·数据库·信息可视化·.net·web端·razor page
linlinlove22 小时前
前端uniapp、后端thinkphp股票系统开发功能展示、代码披露、HQChart
前端·uni-app·echarts·thinkphp·hqchart·配资·deepseek选股票
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03【AI】2026 年具身智能模型和世界模型总结04Codex 接入 DeepSeek API 完整配置文档05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）09几个好用的ip纯净度检测网站10API Key 登录 Codex 也能用插件了，还支持会话删除和导出