Question

路由是我在AngularJs中使用异步加载动态内容通过ajax调用的方法。这就是我这样做的方式：

var $app = angular.module('app', ['ngRoute']);

$app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
  $routeProvider
    .when("/pop", {controller: "popCtrl", templateUrl: "partials/pop_test.html"})
    .when("/dashboard", {controller: "dashBoardCtrl", templateUrl: "partials/dashboard.html"})
    .otherwise({redirectTo: "/"})

    $locationProvider.html5Mode(true);
}])

我还设置了迷你导航设备，这样当我点击我的链接时，它会通过 templatrUrl参数

加载这些部分内容

   <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/pop">Pop</a></li>
        <li><a href="/dashboard">Dashboard</a></li>
   </ul>

这一切都很有效，当我点击我的链接时，它加载了我在 pop_test.html 和 dashboard.html

中设置的内容

现在我遇到的问题。

当您单击链接以表示仪表板时，通过 ng-view 可以很好地加载内容，并且如果用户重新加载或刷新页面，则路由效果很好让你说 localhost / dashboard 它实际上会尝试转到那个链接并找到一个以你之后的名字命名的文件/在这种情况下是一个名为dashboard的目录。

那么当用户刷新或重新加载页面时，我怎么能这样做呢？他实际上没有重新加载/仪表板页面，因此没有找到服务器错误页面。

Answer 1

正如Alberto所说，服务器需要知道该怎么做。在Angular的情况下，使用index.html时，所有内容都需要通过$locationProvider.html5Mode(true);进行路由，否则您将遇到现在的情况。

要解决此问题，您需要添加一个服务器重写规则，您可以在ui-router's docs here中找到它的说明以及不同的服务器版本。

您还可以添加.htaccess文件，其中包含index.html的重写规则，如下所示：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

AngularJs路由和刷新

1 个答案: