Navigation API 的 destination.url 仅在 navigate 事件回调中可用，是解析后的完整 URL，不可全局访问；它不适用于 location.href 跳转或表单提交，且跨域 iframe 或地址栏手动输入时可能为空或被屏蔽。
Navigation API 的 destination.url 只在导航事件中可用，不能直接读取
你无法在任意时刻访问 destination.url——它不是全局属性，也不是 window 或 document 上的可读字段。它只存在于 navigate 事件的 event.destination 对象中，且仅在浏览器触发导航时（比如点击链接、调用 navigation.navigate()）同步提供。
常见错误是试图在页面加载后或点击前就去读 navigation.destination?.url，结果得到 undefined 或报错 Cannot read property 'url' of undefined。
-
navigate事件是唯一能安全访问event.destination.url的时机 - 该事件在导航开始时触发，但尚未提交（可被
event.preventDefault()阻止） - 不适用于传统
location.href跳转或表单提交——这些不会触发navigate事件
监听 navigate 事件并提取 destination.url
必须显式监听 navigation.addEventListener('navigate', ...)，并在回调中取值。注意：navigation 是全局的 Navigation 实例（Chrome 110+，Firefox 尚未支持，Safari 无计划）。
navigation.addEventListener('navigate', (event) => {
// ✅ 正确：event.destination 存在且有 url 属性
const targetUrl = event.destination.url;
// 可选：阻止默认行为，实现自定义路由逻辑
if (targetUrl.startsWith('/admin/')) {
event.preventDefault();
loadAdminPage(targetUrl);
}
});
-
event.destination.url是解析后的完整 URL（如https://example.com/about），不是相对路径 - 如果导航由
history.pushState()触发，event.destination仍存在，但event.canIntercept为false，此时无法preventDefault() - SPA 框架需主动适配：React Router / Vue Router 当前均未默认启用 Navigation API，需手动桥接
为什么 destination.url 有时为空或不是预期值
不是所有导航都携带有效 destination.url。典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 用户手动输入地址栏并回车 →
event.destination为null（Chrome 行为，规范允许） - 跨域 iframe 内导航 →
destination.url被屏蔽为about:blank或空字符串（同源策略限制） - 导航被重定向多次（如 302）→
event.destination.url是初始目标 URL，不是最终跳转地址 - 使用
navigation.navigate()时传入相对路径但未指定baseURL→ 解析可能出错，建议始终传入绝对 URL
替代方案：当 Navigation API 不可用或不适用时
如果你的目标只是“知道用户点的是哪个链接”，而不用拦截导航，destination.url 其实是过度设计。更简单可靠的方式是：
- 给链接加
data-*属性：<a href="/product" data-track="product-list">...，然后监听click事件取dataset.track - 监听
beforeunload或pagehide时读document.referrer（仅限来源，非目标） - 对
pushState/replaceState调用点统一埋点，而非依赖事件捕获
Navigation API 的核心价值在于可拦截和控制导航流，不是做日志记录。强行用它来“获取目标地址”，反而会掉进兼容性、空值、跨域等坑里。
