SPA 中使用 hash 路由时作用和意义

合集 - 前端小知识点(36)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01 8.如何实现网页加载进度条01-01 9.常见图片懒加载方式有哪些01-01 10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01 13.一直在window上面挂东西是否有什么风险01-01 14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01 16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01 17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01 18.package.json 里面 sideEffects 属性的作用01-01 19.script 标签上有那些属性01-01

20.SPA 中使用 hash 路由时作用和意义01-01

21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26 36.深度响应式劫持vue303-07

以下是对这个问题更准确的解释：

关于刷新页面时的请求

当你在 SPA 中使用 hash 路由时，正常情况下，仅修改 URL 的 hash 部分（例如从 http://example.com/#/page1 更改为 http://example.com/#/page2）不会向服务器发送请求。然而，当你刷新页面时，浏览器会向服务器发送请求，但它发送的是不包含 hash 部分的 URL（即 http://example.com/）。

原因

服务器请求的依据：
- 浏览器在处理 URL 时，只会将 # 号之前的部分作为请求的依据发送给服务器。所以当你刷新页面时，它会根据 http://example.com/ 向服务器请求资源，而不是包含 hash 的部分。
- 这是因为 hash 部分的主要目的是为了在客户端内部进行状态标识和导航，在 HTTP 协议的层面上，它被视为页面的内部片段标识符，不影响页面的主要请求内容。

可能造成混淆的情况

服务器端的处理：
- 对于 SPA 应用，服务器通常只需要提供初始的 HTML、CSS 和 JavaScript 等静态资源，而后续的页面内容更新由客户端的 JavaScript 代码处理。如果服务器没有正确处理这种情况，可能会导致一些混淆。例如，服务器可能会为 http://example.com/ 提供一个完整的页面，但不会考虑不同的 hash 部分。

解决刷新页面的问题

服务器端配置：
- 为了确保刷新页面时不会出现问题，服务器端通常需要配置为对 http://example.com/ 及类似的请求返回相同的 HTML 文件（即 SPA 的入口文件），这样无论用户如何刷新页面，都能重新加载 SPA 的入口，然后客户端根据当前的 hash 部分来展示相应的页面内容。
- 例如，在使用 Node.js 的 Express 框架时，可以这样配置：
```
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.listen(3000);
```
这里，对于根路径 / 的请求，服务器会始终发送 index.html 文件，这是 SPA 的入口文件，后续的页面切换由客户端根据 hash 路由处理。

与传统多页应用的区别

传统多页应用的刷新请求：
- 在传统的多页应用中，当你从 http://example.com/page1 跳转到 http://example.com/page2 并刷新页面时，浏览器会向服务器请求 http://example.com/page2 的完整资源，因为每个页面都有自己的独立 HTML 文件，服务器会根据不同的路径提供不同的内容。
SPA 应用的刷新请求：
- 在 SPA 中，刷新页面时的请求和多页应用不同，因为 SPA 只有一个 HTML 文件作为入口，后续的页面状态是通过 JavaScript 和 hash 路由来管理的。

避免混淆的建议

前端开发：

在开发 SPA 时，确保前端代码能够根据 hash 部分准确更新页面状态。例如，使用 hashchange 事件监听 hash 的变化，并根据不同的 hash 值加载相应的组件或内容：

window.addEventListener('hashchange', function() {
  const hash = window.location.hash;
  // 根据 hash 加载相应的组件或内容
  switch (hash) {
    case '#/page1':
      loadPage1();
      break;
    case '#/page2':
      loadPage2();
      break;
    default:
      loadDefaultPage();
  }
});

服务器端开发：
- 确保服务器端为 SPA 的入口文件提供服务，并且不依赖于 hash 部分进行内容的提供。对于任何请求，都提供 SPA 的入口文件，让客户端来处理后续的页面状态更新，以保证在刷新页面时能正常恢复到刷新前的页面状态。

总之，使用 hash 路由时，刷新页面发送的请求是针对 # 号之前的部分，而不是整个包含 hash 的 URL，为了避免刷新页面时出现异常，需要前端和服务器端协同工作，确保前端根据 hash 部分更新页面，服务器端始终提供 SPA 的入口文件。

posted @ 2025-01-01 18:52 jialiangzai 阅读(57) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

SPA 中使用 hash 路由时作用和意义

关于刷新页面时的请求

原因

可能造成混淆的情况

解决刷新页面的问题

与传统多页应用的区别

避免混淆的建议

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏