如何指定Turbo链接的视图过渡方向为Back？

已配置CSS适配Back和Forward页面过渡：点击站内链接触发Forward过渡，点击浏览器后退按钮触发Back过渡。CSS通过html标签的data-turbo-visit-direction="forward"和data-turbo-visit-direction="back"属性定位。尝试用以下代码指定某链接触发Back过渡，但未改变html标签的对应data属性：

<%= link_to "Cancel", post, data: {turbo_visit_direction: 'back'} %> &nbsp;

问题原因 #

Turbo并不会直接识别链接上的data-turbo-visit-direction属性，这个属性是Turbo根据导航的历史上下文（前进/后退动作）自动添加到html标签上的。直接在链接上设置该属性无法覆盖Turbo的默认逻辑。

解决方案 #

方案1：手动调用Turbo.visit指定方向

禁用链接的默认Turbo处理，通过JS手动调用Turbo.visit()并传入direction参数：

<%= link_to "Cancel", post_path(post), 
      onclick: "Turbo.visit(this.href, { direction: 'back' }); return false;",
      data: { turbo: false } %>

• data: { turbo: false }：禁用Turbo对该链接的默认导航处理
• Turbo.visit(this.href, { direction: 'back' })：手动触发Turbo导航，并明确指定方向为back，这样html标签的data-turbo-visit-direction会被设置为back

方案2：通过Turbo事件修改导航方向

保留原链接写法，添加事件监听来拦截导航并修改方向：

1. 链接代码不变：

<%= link_to "Cancel", post, data: { turbo_visit_direction: 'back' } %>

2. 在你的JS文件中添加事件监听：

document.addEventListener('turbo:before-visit', (event) => {
  const targetLink = event.target.closest('[data-turbo-visit-direction="back"]');
  if (targetLink) {
    // 强制将导航方向设置为back
    event.detail.direction = 'back';
  }
});

这个方法会在Turbo发起导航前触发，检查触发导航的元素是否带有指定的data属性，如果是则修改导航方向，从而让html标签的data-turbo-visit-direction被正确设置为back。

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