Rails link_to 不路由

Posted

技术标签:

【中文标题】Rails link_to 不路由【英文标题】:Rails link_to not routing 【发布时间】: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

【问题讨论】:

【参考方案1】:

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

【讨论】:

我认为您是对的,我尝试添加 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 提供指导

【讨论】:

以上是关于Rails link_to 不路由的主要内容,如果未能解决你的问题,请参考以下文章

无法使用link_to或button_to rails访问嵌套路由

处理 Rails 中 STI 子类的路由的最佳实践

Rails 资源路由缺少参数但匹配文档

Rails6 Link_to Delete 显示 Showview

Rails link_to 最后一个脚手架项目

link_to嵌套资源路由找不到ID