Angular中如何获取包含所有查询参数的完整returnURL？

当前页面URL为：
http://127.0.0.1:4200/app/login/123456?returnUrl=%2Flive-score%3Fleague%3Dworldcup&v=1.23

使用以下代码获取returnUrl时：

this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';

得到的结果仅为 /live-score?league=worldcup，但需要的是包含v=1.23的完整路径 /live-score?league=worldcup&v=1.23。

解决方案 #

方案1：手动拼接额外参数

如果v=1.23是目标页面（live-score）的参数，可从当前路由的queryParams中单独取出v参数，再拼接到returnUrl上：

const baseReturnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
const vParam = this.route.snapshot.queryParams['v'];

this.returnUrl = vParam 
  ? `${baseReturnUrl}${baseReturnUrl.includes('?') ? '&' : '?'}v=${vParam}` 
  : baseReturnUrl;

方案2：修正跳转时的URL编码

如果希望v=1.23作为returnUrl的一部分被整体传递，在跳转到login页面时，需要对完整的目标URL进行编码：

// 构造跳转URL时的代码示例
const targetUrl = '/live-score?league=worldcup&v=1.23';
const loginUrl = `/app/login/123456?returnUrl=${encodeURIComponent(targetUrl)}`;
// 此时login页面的URL会是：http://127.0.0.1:4200/app/login/123456?returnUrl=%2Flive-score%3Fleague%3Dworldcup%26v%3D1.23
// 直接使用queryParams['returnUrl']就能拿到完整的目标URL

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