Question

我想设置由angular.js路由的可访问和可收藏的网址。

该应用程序只是整个网站的一部分，可通过http://example.com/application/

访问

/application/后的任何内容都是路线参数。

现在我想要一个可以通过

访问的URL

http://example.com/application/#/filter1/filter2/filter3/
                               ^ hashbang here

或

http://example.com/application/filter1/filter2/filter3/
                              ^ no hashbang here

我希望angular.js可以将我的路径参数传递给我的应用程序，但是我会通过.otherwise进行路由。

基本路线设置

$locationProvider.html5Mode(true); // this requires base-tag to be set in dom, 
                                   // but doesnt work for me

$routeProvider
    .when('/application/:filter1/:filter2/:filter3', {
        action: 'filter',
        reloadOnSearch: false
    })
    .otherwise({
        redirectTo: '/application/' + filter1 + '/' + filter2 + '/' + filter3
    });

在该应用程序的 HTML 中，我放了<base href="/application/" />，这似乎工作正常，但重新加载页面或在经过.otherwise-route后重新访问它没有'工作，服务器说“找不到页面”。

当我禁用HTML5模式并删除基本标记时，它也不起作用，我会通过.otherwise路由

Answer 1

这是因为您的服务器知道application/（并且可能返回application.html）但不知道application/filter1/filter2/filter3/（因为filter3.html不存在）。

你可以：

决定只使用哈希语法（服务器读取#之前的所有内容，然后让浏览器（在您的情况下为角度）管理所有内容。
设置您的服务器，以便以application/*开头的每个路径返回浏览器application.html。

此外，我认为您需要从路由提供程序中删除基础：

$routeProvider
.when('/:filter1/:filter2/:filter3', {
    action: 'filter',
    reloadOnSearch: false
})
.otherwise({
    redirectTo: '/' + filter1 + '/' + filter2 + '/' + filter3
});

angular.js url routing和html5Mode（true）

1 个答案: