如何在子元素上设置 active_link_to 以仅设置活动？答案

【问题标题】：How to set active_link_to on child elements to set active only?如何在子元素上设置 active_link_to 以仅设置活动？
【发布时间】：2020-07-17 17:01:46
【问题描述】：

我是 Rails 新手，我只想在子元素上设置 active_link_to。我正在使用这个 gem https://github.com/comfy/active_link_to

情况：

parent element path:
localhost:3000/columns  // This one is set to active when going to that specific page

child element path:
localhost:3000/columns/post // This one will also be active also but the parent element is also active

我有这个导航栏：

<ul class="nav-bar">
    <li class="nav-item">
        <%= active_link_to columns_root_path, :class => 'nav-link' do %>
            Columns
        <% end %>
    </li>
    <li class="nav-item">
        <%= active_link_to columns_post_path, :class => 'nav-link' do %>
            Post
        <% end %>
    </li>
</ul>

如果我只转到子元素，如何删除父元素中的active_link_to。因为在我的情况下，当我转到这条路径时：localhost:3000/columns/post columns 和 post 路径都将设置为活动状态。

我的路线文件中有这里。 routes.rb

namespace :columns do
    root 'columns#index', as: "root"
    get 'post' => 'post#index'
end

通常我将文件夹设置为这个：

app/views/columns/columns/index.html.erb  //for the columns index
app/views/columns/post/index.html.erb  //for the post index

【问题讨论】：

active_link_to 不是 Rails 方法。它来自哪里？它是如何定义的？

标签： ruby-on-rails ruby rubygems

【解决方案1】：

我不熟悉active_link_to gem。但是请重新阅读文档，我猜active: :exact 选项就是您要寻找的。p>

<ul class="nav-bar">
    <li class="nav-item">
        <%= active_link_to columns_root_path, active: :exact, :class => 'nav-link' do %>
            Columns
        <% end %>
    </li>
    <li class="nav-item">
        <%= active_link_to columns_post_path, active: :exact, :class => 'nav-link' do %>
            Post
        <% end %>
    </li>
</ul>

【讨论】：

你好，这个也是正确的。我已经彻底阅读了文档，最终我使用了active: :exclusive。无论哪种方式，这两个条件都是正确的。谢谢你。