Angular中无法读取URL的queryParams，window.location获取异常求助

你的问题核心是前端路由框架的hash模式导致了URL重定向，具体原因和解决方法如下：

问题原因 #

你使用的前端路由（比如Vue Router、React Router）开启hash模式时，浏览器会将#视为前端路由的分隔符。当原始URL为www.abc.com?accountId=123#时，路由框架初始化阶段会自动丢弃#之前的query参数，并重定向到默认路由路径（也就是你看到的www.abc.com/#/），导致window.location只能读取到重定向后的URL，自然拿不到accountId。

解决方法 #

1. 在路由初始化前提前读取参数 #

在路由框架启动前，window.location.search还能获取到原始的query参数，你可以在应用入口的最早期代码中读取并保存：

// 应用启动的第一行代码
const rawQuery = window.location.search;
const params = new URLSearchParams(rawQuery);
const accountId = params.get('accountId');

// 将参数存入全局变量或状态管理工具
window.globalAccountId = accountId;

// 之后再初始化路由
// ... 路由初始化代码

2. 切换为history模式（推荐） #

如果你的服务器支持配置，将路由模式改为history模式，URL中不再包含#，query参数会被正常保留。需要注意的是，服务器需要配置 fallback 规则（比如Nginx将所有请求转发到index.html），避免页面刷新时出现404错误。

3. 调整URL格式（临时方案） #

如果无法修改服务器配置，可以将query参数放到#之后，比如www.abc.com/#/?accountId=123。此时路由框架会识别#后的query参数，你可以通过路由框架自带的API（如Vue Router的$route.query）获取accountId，但这种URL格式不够直观美观。

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