Rails link_to 不路由答案

【问题标题】：Rails link_to not routingRails link_to 不路由
【发布时间】：2021-07-08 00:22:11
【问题描述】：

这与我之前的帖子有关，我很绝望，我相信这会有一个简单的解决方案，我只是不明白如何......我用 Ruby 2.7 开始了另一个项目 .2 和 Rails 6.1.3。我在侧边栏中使用了手风琴菜单，但同样，'link:to' 只是忽略了路线......我发现 Javascript 视觉效果（手风琴菜单）和我上一篇文章中的模式使用了' event.preventDefault()' 来做它的视觉魔术......这里奇怪的是，如果我在浏览器导航中编写路线它可以工作......所以这只是我的代码不起作用......路线被定义为通常使用“资源：用户”...

     users GET    /users(.:format)            users#index
           POST   /users(.:format)            users#create
  new_user GET    /users/new(.:format)        users#new
 edit_user GET    /users/:id/edit(.:format)   users#edit
      user GET    /users/:id(.:format)        users#show
           PATCH  /users/:id(.:format)        users#update
           PUT    /users/:id(.:format)        users#update
           DELETE /users/:id(.:format)        users#destroy

这里是代码... 控制器动作：(app/controllers/users_controller.rb)

class UsersController < ApplicationController
  before_action :set_user, only: %i[ show edit update destroy ]
  before_action :options

  # GET /users or /users.json
  def index
    @users = User.all
  end

创建菜单的哈希 (app/controllers/application_controller.rb)

class ApplicationController < ActionController::Base
  def options
    @options = [
      {:letrero => "Almacen", :submenu =>
        [
          {:opcion => "Entradas", :ruta => '#'}, 
          {:opcion => "Salidas", :ruta => '#'}
        ]
      },
      {:letrero => "Proveedores", :submenu =>
        [
          {:opcion => "Indice", :ruta => 'suppliers_path'}
        ]
      },
      {:letrero => "Productos", :submenu =>
        [
          {:opcion => "Index", :ruta => 'products_path'}, 
          {:opcion => "Autorización", :ruta => '#'}
        ]
      },
      {:letrero => "Usuarios", :submenu =>
        [
          {:opcion => "Indice", :ruta => 'users_url'}
        ]
      }
    ]
  end
end

侧边栏菜单（app/views/static_pages/_sidebar.html.erb）：

<ul class="menu">
  <% @options.each do |opcion| %>
    <li>
      <%= link_to "#{opcion[:letrero]}<i class='icono derecha fas fa-chevron-down drop-down'></i>".html_safe, '#'%>
      <ul>
        <li>
          <% opcion[:submenu].each do |subopcion| %>
            <%= link_to subopcion[:opcion], eval(subopcion[:ruta]) %>
          <% end %>
        </li>
      </ul>
    </li>
  <% end %>
</ul>

这是 app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>AlmacenCEB</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= favicon_link_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
  </head>

  <body>
    <div class="container">
      <nav>sistema de caja</nav>
      <div class="main-w">Main
        <%= yield %>
      </div>
      <div class="sidebar">
        <div class="titulo">Menú principal</div>
        <%= render "static_pages/sideBar" %>
      </div>
      <footer>Footer</footer>
    </div>  
  </body>
</html>

这些是解释案例的几张图片

这是应用程序的仓库：https://github.com/lflores1961/almacenCEB

【问题讨论】：

标签： javascript html jquery ruby-on-rails

【解决方案1】：

我认为您的问题出在 app/javascript/packs/static_pages.js 文件中，特别是通过 e.preventDefault(); 调用，您正在阻止点击事件传播到 <a> 孩子。

【讨论】：

我认为您是对的，我尝试添加 e.stopPropagation() 但不确定在哪里或如何执行此操作，我正在阅读文档以了解更多信息
@LuisFlores 但是你为什么要阻止事件被传播？
我只是在猜测，我对 JavaScript 不太擅长......我正在观看一些 Youtube 视频，试图了解它是如何工作的
@LuisFlores 很酷。但归根结底，删除该行是否解决了您的链接问题？如果是这样，请考虑将我的答案标记为已接受，干杯
我尝试删除该行，但手风琴菜单效果停止工作（我看不到主选项后面的选项）所以，不，这不是解决方案，抱歉没有及时响应。我想我需要弄清楚手风琴显示后如何响应点击...

【解决方案2】：

我在YouTube上找到了这个问题的解决方案，我希望它可以帮助任何寻找类似问题的人，老实说没有问题，但我对JavaScript缺乏了解......所以这里是完整的JavaScript函数必须进入 app/javascript/packs/static_pages.js

$(function () {
  $('.menu li:has(ul)').on("click", function(e) {
    e.preventDefault();
    if ($(this).hasClass('activado')) {
      $(this).removeClass('activado');
      $(this).children('ul').slideUp();
    } else {
      $('.menu li ul').slideUp();
      $('.menu li').removeClass('activado');
      $(this).addClass('activado');
      $(this).children('ul').slideDown();
    }
  });

  $(".menu li ul li a").on("click", function (e) {
    window.location.href = $(this).attr("href");
  });
});

感谢 Alter Lagos 提供指导

【讨论】：