如何在Aurelia启用pushState时阻止route-href的默认导航？

问题回顾 #

你在Aurelia项目里实现了两个实用的路由相关属性：

• route-href：负责常规的路由跳转，代码示例：

  <a route-href="route: item; params.bind: {id: item.id}">${item.name}</a>
  

• 自定义的route-popup：通过<compose>在固定浮层中打开路由，运行正常：

  <a route-popup="route: item; params.bind: {id: item.id}">${item.name}</a>
  

为了支持用户Ctrl+点击在新窗口打开项目，你将两个属性同时加到了同一个<a>标签上：

<a route-href="route: item; params.bind: {id: item.id}" route-popup="route: item; params.bind: {id: item.id}">${item.name}</a>

之后你在RoutePopupCustomAttribute类里尝试通过点击事件阻止route-href的默认行为：

this.onClick = e => { 
  e.preventDefault(); 
  e.stopPropagation(); 
  this.ea.publish('route-popup:open', {route: this.route, params: this.params}); 
  return false; 
};

但遇到了奇怪的差异：当路由配置启用hashChange: true时，e.preventDefault()能正常阻止跳转；但启用pushState: true时完全无效，Aurelia还是会跳转到目标路由。

问题根源 #

这是Aurelia的route-href在pushState模式下的特殊处理逻辑导致的：在pushState模式下，route-href会绑定mousedown事件来处理导航，而非我们通常认知的click事件。你的自定义属性绑定的click事件触发时机晚于mousedown，所以即使在click里调用preventDefault()，也无法阻止已经在mousedown阶段启动的导航流程。

解决方案 #

我们需要调整自定义属性的事件绑定策略，和route-href的事件处理逻辑对齐：

1. 把事件从click改成mousedown：匹配route-href的事件触发时机；
2. 在捕获阶段执行事件处理：确保我们的逻辑在route-href之前运行；
3. 保留Ctrl/Command点击的新窗口功能：只在普通点击时阻止默认行为。

修改后的RoutePopupCustomAttribute代码如下：

export class RoutePopupCustomAttribute {
  static inject = [Element, EventAggregator];

  constructor(element, ea) {
    this.element = element;
    this.ea = ea;
    this.handleMouseDown = this.handleMouseDown.bind(this); // 绑定上下文避免this丢失
  }

  attached() {
    // 绑定mousedown事件，第三个参数true表示在捕获阶段触发
    this.element.addEventListener('mousedown', this.handleMouseDown, true);
  }

  detached() {
    // 组件销毁时移除事件监听，避免内存泄漏
    this.element.removeEventListener('mousedown', this.handleMouseDown, true);
  }

  handleMouseDown(e) {
    // 仅当未按下Ctrl或Command键时，阻止默认导航并触发浮层
    if (!e.ctrlKey && !e.metaKey) {
      e.preventDefault();
      e.stopPropagation();
      this.ea.publish('route-popup:open', {route: this.route, params: this.params});
    }
    // 若为Ctrl/Command点击，保留route-href的默认行为，在新窗口打开路由
  }
}

效果验证 #

修改完成后，无论你的路由配置是hashChange还是pushState模式，都能完美满足需求：

• 普通点击：触发浮层打开路由，不会跳转页面；
• Ctrl/Command点击：正常在新窗口打开目标路由，符合用户操作习惯。

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