Angular：进入页面A时如何判断来源是页面B还是C？

方案1：利用document.referrer获取来源URL #

浏览器会记录跳转前的页面地址，通过这个属性可以直接判断来源：

// 在页面A的脚本中执行
const referrer = document.referrer;
// 替换成实际的页面B、C的URL特征，比如路径包含'/pageB'
const isFromB = referrer.includes('/pageB');
const isFromC = referrer.includes('/pageC');

if (isFromB) {
    // 处理来自页面B的逻辑
    console.log('来源：页面B');
} else if (isFromC) {
    // 处理来自页面C的逻辑
    console.log('来源：页面C');
} else {
    console.log('来源未知或直接访问');
}

⚠️ 注意：如果来源页面使用了rel="noreferrer"属性跳转，或者用户直接打开页面A，document.referrer会返回空字符串。

方案2：跳转时携带URL参数（最可靠） #

在页面B、C跳转至A时，手动拼接标识参数，页面A解析参数判断：

• 页面B跳转代码：

// 页面B中跳转到A的逻辑
window.location.href = '/pageA?from=pageB';

• 页面C跳转代码：

// 页面C中跳转到A的逻辑
window.location.href = '/pageA?from=pageC';

• 页面A解析参数代码：

// 页面A中获取并判断来源
const urlParams = new URLSearchParams(window.location.search);
const fromPage = urlParams.get('from');

if (fromPage === 'pageB') {
    console.log('来源：页面B');
} else if (fromPage === 'pageC') {
    console.log('来源：页面C');
}

这个方法不受浏览器referrer限制，跨域场景也能正常工作，是最推荐的方案。

方案3：使用本地存储传递标识 #

通过sessionStorage或localStorage在跳转前写入来源标识，页面A读取后判断：

• 页面B跳转前设置：

sessionStorage.setItem('fromPage', 'pageB');
window.location.href = '/pageA';

• 页面C跳转前设置：

sessionStorage.setItem('fromPage', 'pageC');
window.location.href = '/pageA';

• 页面A读取并处理：

const fromPage = sessionStorage.getItem('fromPage');
if (fromPage === 'pageB') {
    console.log('来源：页面B');
} else if (fromPage === 'pageC') {
    console.log('来源：页面C');
}
// 读取后建议清除，避免后续访问A时残留标识
sessionStorage.removeItem('fromPage');

⚠️ 注意：sessionStorage仅在当前标签页有效，关闭标签后清空；localStorage会持久保存，需注意清理避免干扰后续逻辑。

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