Nuxt中含哈希(#)的链接大小写重定向失效问题求助

首先明确核心问题：浏览器不会把URL中的哈希片段（#之后的部分）发送到服务器，所以你在服务端中间件里的req.url根本不包含#Contacts这部分内容，导致大小写判断逻辑完全无法触发。

解决方案：客户端处理哈希重定向 #

因为哈希是客户端层面的内容，需要用Nuxt的客户端中间件来实现：

1. 创建客户端中间件 #

在middleware文件夹下新建hash-redirect.js文件，代码如下：

export default function () {
  // 确保只在客户端执行
  if (process.client) {
    const currentHash = window.location.hash;
    // 检查哈希是否存在且不是全小写
    if (currentHash && currentHash !== currentHash.toLowerCase()) {
      const lowerCaseHash = currentHash.toLowerCase();
      // 使用replaceState修改哈希，不会触发页面刷新
      window.history.replaceState(null, document.title, lowerCaseHash);
      
      // 如果需要强制页面刷新（不推荐，影响体验），可以替换成下面一行：
      // window.location.href = `${window.location.origin}${window.location.pathname}${lowerCaseHash}`;
    }
  }
}

2. 配置全局或页面级中间件 #

打开nuxt.config.js，将这个中间件设置为全局生效（或指定特定页面使用）：

export default {
  router: {
    // 全局生效，所有页面都会触发哈希检查
    middleware: ['hash-redirect']
  }
}

额外说明 #

• 哈希片段的大小写本身不会影响SEO，因为搜索引擎通常不会解析页面内的锚点哈希（除非是配置了锚点导航的SPA路由，但你的场景是普通锚点）。如果是SEO专员的特定要求，上述客户端方案可以满足需求。
• 服务端中间件无法处理哈希的本质是HTTP协议的特性：请求URL中#之后的内容属于客户端侧的片段标识符，不会被包含在发送给服务器的请求中。

内容的提问来源于stack exchange，提问作者a_mhmd