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文档但仍无法解决这个问题。 plz :(

编辑：我做了更多测试，这只适用于包含斜杠的路线。如果有一个参数（如:id）似乎没关系。转到/hello（如果定义了该路由）适用于HTML5和非HTML5模式下的所有情况。像/hello/world这样的东西总是在非HTML5模式下工作，并且当通过点击链接从另一条路线改变路线时，在HTML5模式下工作。在/hello/world上刷新，转到地址栏并按Enter或从另一个网站点击指向它的链接会导致它重新加载索引页而不是实际路线。

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，而角度应该能够正确路由它。

当直接转到URL时，AngularJS路径中的参数路径未在HTML5模式下加载

2 个答案: