浏览器 路由详解

Hash路由

  • URL 结构:http://example.com/#/path,`# 后`的部分称为哈希(Hash)。
  • 无刷新特性:浏览器不会将哈希部分发送到服务器,改变哈希值不会触发页面刷新。
  • 事件驱动:URL 哈希部分变化, 监听 hashchange 事件,动态更新页面内容。

hashchange 事件​:

  • 作用:监听 URL 哈希值变化,触发页面更新。
    示例:
js 复制代码
window.addEventListener('hashchange', () => {
  const currentHash = window.location.hash.substring(1); // 去掉 "#" 符号
  console.log('当前路径:', currentHash); // 如 "/home"
  renderPage(currentHash); // 根据路径渲染页面
});

​​手动触发哈希变化​:

  • 直接修改 window.location.hash 会触发 hashchange 事件:
js 复制代码
// 跳转到 "#/profile"
window.location.hash = '/profile';

History 路由

  • URL 结构:http://example.com/path,路径与真实 URL 一致。
  • 无刷新跳转:通过 pushState() replaceState() 修改历史记录,不会触发页面重载。
  • 事件驱动:监听 popstate 事件响应浏览器前进/后退操作。
  1. history.pushState(state, title, url)
    作用:向浏览器历史记录栈添加新记录,URL 更新但页面不刷新。
    参数:
    • state:与当前记录关联的状态对象(可用于 popstate 事件恢复页面状态)。
    • title:大多数浏览器忽略此参数,可传空字符串。
    • url:新路径(需符合同源策略)。
js 复制代码
history.pushState({ page: 1 }, '', '/page1'); // URL 变为 /page1
  1. history.replaceState(state, title, url)
    作用:替换当前历史记录,不添加新条目。
js 复制代码
history.replaceState({ page: 2 }, '', '/page2'); // 当前记录替换为 /page2
  1. popstate 事件
    触发条件:用户点击浏览器 前进/后退 按钮,或调用 history.back() / history.forward()。
    注意:直接调用 pushState() replaceState() 不会触发此事件。
js 复制代码
// 前进/后退, 会触发popstate事件
window.addEventListener('popstate', () => {
  const path = window.location.pathname;
  renderPage(path);
});

pushState() 和 replaceState() 的本质作用

这两个方法属于 HTML5 History API,核心功能是 ​​操作浏览器历史记录栈​​:

  • pushState():向历史记录栈中添加一个新条目。
  • replaceState():替换当前历史记录栈中的条目。
    共同特性:
    • 仅修改 URL 和历史记录,不会刷新页面。
    • 不会触发任何事件(包括 popstate)。
    • 不会自动更新页面内容。

要让页面"跳转"(即内容切换),需开发者 ​​手动将 URL 与页面状态同步​​,或者利用路由库(封装底层 API,实现 URL 与组件的自动同步)。

⚠️ history路由注意刷新404问题

  • History模式(如HTML5 History API)使用真实的URL路径(如example.com/user/profile ),当用户刷新页面时,浏览器会向服务器请求这个完整路径。如果服务器没有配置正确的路由处理,就会返回404错误,因为服务器上可能并不存在这个物理路径对应的资源。
  • Hash模式使用URL哈希值(如example.com/#/user/profile ),浏览器在请求时只会发送哈希值前面的部分(example.com/ )到服务器,哈希值部分(#/user/profile )不会被发送。因此无论哈希值如何变化,服务器始终接收到的是同一个请求,不会出现404问题。
相关推荐
指针满天飞13 分钟前
CondaError: Run ‘conda init‘ before ‘conda activate‘
前端·chrome·conda
斯~内克16 分钟前
前端视频流技术深度解析
前端
得物技术17 分钟前
Cursor 在前端需求开发工作流中的应用|得物技术
前端·aigc·cursor
呦呦鹿鸣Rzh22 分钟前
SpringMVC的数据响应
java·服务器·前端
申朝先生37 分钟前
webpack和vite的区别是什么
前端·webpack·node.js
阿虎儿1 小时前
VS Code 的 launch.json 进行高效代码调试:配置和原理解析
前端·visual studio code
这里有鱼汤1 小时前
一篇文章带你了解Python的反射机制,从小白到大神的进阶之路
前端·后端·python
这里有鱼汤1 小时前
Python内存管理技巧,一篇文章告诉你内存优化的本质!
前端·后端·python
星星跌入梦境*1 小时前
前端面试题(三):axios有哪些常用的方法
前端
前端双越老师1 小时前
程序员如何体现工作热情和积极性?埋头苦干没有用
前端·面试