我正在构建一个应用程序，每当我点击一个链接时，浏览器都认为它已经完成了加载页面，但没有任何渲染。但是，一旦我重新加载页面，页面最终会呈现。
我使用的是Rails 4.4和Ruby 2.0.0。
我认为问题可能是由于我使用pace.js。我的资产管道中有pace.js以及它的css文件。
以下是我的application.html.erb
的代码<!DOCTYPE html>
<html lang="en">
<head>
<title id="page-title">Phoenix</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->
<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
<!-- begin container-fluid -->
<div>
<!-- begin mobile sidebar expand / collapse button -->
<div class="navbar-header">
<a href="/clients/" class="navbar-brand"></span>Phoenix</a>
<button type="button" class="navbar-toggle" data-click="sidebar-toggled">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- end mobile sidebar expand / collapse button -->
<!-- begin header navigation right -->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form full-width">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</div>
</form>
</li>
<li class="dropdown">
<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
<i class="fa fa-bell-o"></i>
<span class="label">5</span>
</a>
<ul class="dropdown-menu media-list pull-right animated fadeInDown">
<li class="dropdown-header">Notifications (5)</li>
<li class="media">
<a href="javascript:;">
<div class="media-left"><i class="fa fa-bug media-object bg-red"></i></div>
<div class="media-body">
<h6 class="media-heading">Server Error Reports</h6>
<div class="text-muted f-s-11">3 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="media-left"><img src="/assets/user-1.jpg" class="media-object" alt="" /></div>
<div class="media-body">
<h6 class="media-heading">John Smith</h6>
<p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted f-s-11">25 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="media-left"><img src="/assets/user-2.jpg" class="media-object" alt="" /></div>
<div class="media-body">
<h6 class="media-heading">Olivia</h6>
<p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted f-s-11">35 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="media-left"><i class="fa fa-plus media-object bg-green"></i></div>
<div class="media-body">
<h6 class="media-heading"> New User Registered</h6>
<div class="text-muted f-s-11">1 hour ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="media-left"><i class="fa fa-envelope media-object bg-blue"></i></div>
<div class="media-body">
<h6 class="media-heading"> New Email From John</h6>
<div class="text-muted f-s-11">2 hour ago</div>
</div>
</a>
</li>
<li class="dropdown-footer text-center">
<a href="javascript:;">View more</a>
</li>
</ul>
</li>
<li class="dropdown navbar-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<img src="/assets/user-13.jpg" alt="" />
<span class="hidden-xs">Adam Schwartz</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInLeft">
<li class="arrow"></li>
<li><a href="javascript:;">Edit Profile</a></li>
<li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li>
<li class="divider"></li>
<li><a href="javascript:;">Log Out</a></li>
</ul>
</li>
</ul>
<!-- end header navigation right -->
</div>
<!-- end container-fluid -->
</div>
<!-- end #header -->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="1/app/00%">
<!-- begin sidebar nav -->
<ul class="nav">
<li class="nav-header">Navigation</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-suitcase"></i>
<span>Pages <span class="label label-theme m-l-5">NEW</span></span>
</a>
<ul class="sub-menu">
<li><a href="/brands/">Brands</a></li>
<li><a href="/client_addresses/">Client Addresses</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contacts/">Contacts</a></li>
<li><a href="/customers/">Customers</a></li>
<li><a href="/events/">Events</a></li>
<li><a href="/issues/">Issues</a></li>
<li><a href="/newsletters/">Newsletters</a></li>
<li><a href="/publications/">Publications</a></li>
<li><a href="/printers">Printers</a></li>
</ul>
</li>
<!-- begin sidebar minify button -->
<li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
<!-- end sidebar minify button -->
</ul>
<!-- end sidebar nav -->
</div>
<!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
<div class="content" id='content'>
<%= yield %>
</div>
<!-- begin scroll to top btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
<!-- end scroll to top btn -->
</div>
<!-- end page container -->
<script>
$(document).ready(function() {
App.init();
Dashboard.init();
});
</script>
</body>
</html>
到目前为止，我还没有找到任何可以解决这个问题的方法。