link_to转button_to后参数管理一致性问题及替代方案咨询

原本用link_to创建可点击卡片，现在要在卡片内部新增另一个link_to，但HTML不允许锚元素嵌套，尝试替换成button_to后遇到了参数传递的麻烦：

• 直接把参数拼进路径时，button_to完全没传参数
• 用params选项传递时，会把nil参数也带上，导致URL出现?top=&current_page=这种冗余内容

下面是几个更靠谱的实现方案：

方案1：用JavaScript处理卡片点击跳转 #

保留卡片外层为普通div，给它绑定点击事件，点击时跳转到目标路径，卡片内部正常放link_to。既规避嵌套a标签的问题，又能精准控制参数，还能区分内部链接的点击：

<div class="clickable-card" data-path="<%= article_path(@article, top: params[:top].presence, current_page: params[:page].presence) %>">
  <!-- 卡片内容 -->
  <h3><%= @article.title %></h3>
  <!-- 内部独立的link_to -->
  <%= link_to "编辑文章", edit_article_path(@article), class: "edit-link" %>
</div>

<script>
document.querySelectorAll('.clickable-card').forEach(card => {
  card.addEventListener('click', function(e) {
    // 点击内部链接时，不触发卡片跳转
    if (e.target.closest('.edit-link')) return;
    window.location.href = this.dataset.path;
  });
});
</script>

这里用presence方法过滤空值参数，只会保留有实际值的参数，避免URL出现冗余内容。

方案2：优化button_to的参数传递 #

如果一定要用button_to，可以先过滤参数，只保留非nil的键值对：

<% # 先过滤掉值为nil的参数 %>
<% filtered_params = { top: params[:top].presence, current_page: params[:page].presence }.compact %>
<%= button_to article_path(@article, filtered_params), method: :get do %>
  <!-- 卡片内容 -->
  <%= link_to "内部操作链接", some_action_path %>
<% end %>

compact方法会移除哈希中值为nil的键，这样生成的URL就不会带空参数了。

方案3：调整交互逻辑，避免卡片整体可点击 #

如果业务场景允许，直接重构布局：卡片本身不可点击，只在卡片内设置一个明确的“查看详情”链接，同时保留内部的操作链接。这种方式更符合HTML语义规范，也从根源上避免了嵌套问题。

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