直接转到 URL 时，带有路径参数的 AngularJS 路由不会以 HTML5 模式加载

Question

我指定了几条路线：

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    $routeProvider.
    when("/", {
        templateUrl: "/ajax/home.html",
        controller: "HomeController"
    }).
    when("/test/:id", {
        templateUrl: "/ajax/test.html",
        controller: "TestController",
        resolve: {
            data: function ($q, $http, $route) {
                var deferred = $q.defer();
                var params = $route.current.params;

                $http({method: "GET", url: "/api/test/" + params.id + ".json"})
                    .success(function(data) {
                        deferred.resolve(data)
                    })
                    .error(function(data){
                        deferred.reject();
                    });

                return deferred.promise;
            }
        }
    });

    $locationProvider.html5Mode(true);

}]);

当另一条路线上的链接指向/test/x 时，它可以正常工作。不在 HTML5 模式下也可以正常工作。但是，当您在 HTML5 模式下直接导航到 /test/x 时，不会加载路由，并且不会执行任何解析中的内容。

我浏览了很多 AngularJS 文档，但仍然无法弄清楚这一点。请:(

编辑：我做了更多的测试，这仅适用于其中有斜线的路线。是否有参数（如:id）似乎并不重要。转到/hello（如果定义了该路由）适用于 HTML5 和非 HTML5 模式下的所有情况。转到/hello/world 之类的东西总是在非 HTML5 模式下工作，并且在通过单击链接从另一条路线更改路线时在 HTML5 模式下工作。在/hello/world 上刷新时，转到地址栏并按回车键或单击从另一个网站指向它的链接会导致它重新加载索引页面而不是实际路线。

Answer 1

将<base href="/" /> 添加到<head> 部分是一种修复方法，具体取决于您遇到的问题。

（这就是我的答案，所以我想确保让遇到这个问题的其他人更清楚）

感谢@user27766 指出。

Answer 2

使用 HTML5 模式的角度 docs for the $location service 状态要求您在服务器端使用 URL 重写来重写所有指向应用程序入口点的链接（例如 index.html）

如果您使用 Apache 为您的应用程序提供服务，那么您可以像这样设置一个 .htaccess 文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^test/[0-9]+$ index.html [L]

这会将/test/<number> 之类的请求重定向到index.html，并且角度应该能够正确路由它。