Nuxt 3中间件首次加载时无法获取URL哈希值的问题

问题原因 #

URL的哈希部分（#后的内容）属于浏览器端专属信息，不会被发送到服务器。Nuxt默认在服务端渲染阶段执行路由中间件，此时服务端无法获取哈希值，所以首次加载时to.hash为空。而页面刷新或使用navigateTo()时属于客户端路由跳转，哈希已存在于浏览器环境中，因此能正常读取。

解决方法 #

方法1：仅在客户端执行哈希相关逻辑 #

在路由中间件中通过process.client判断当前环境，只在客户端环境下处理哈希：

export default defineNuxtRouteMiddleware(async (to) => {
  if (process.client) {
    console.log("Auth -- hash:", to.hash)
    // 在这里编写哈希解析、认证等业务逻辑
  }
})

方法2：客户端解析后传递给服务端（如需服务端处理） #

如果必须在服务端用到哈希中的数据，可以在客户端解析哈希后，通过API请求将参数传递给服务端，或者存储到Pinia/本地存储，后续在服务端通过这些存储的数据完成对应处理。

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