angular.js url 路由和 html5Mode(true)

Question

我想设置可访问且可收藏的 URL 由 angular.js 路由的 URL。

该应用程序只是可通过 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/" />，这似乎工作正常，但重新加载页面或 re-visiting 它在它通过 .otherwise-route 之后不起作用并且服务器说 "Page not found".

当我禁用 HTML5 模式并删除 base-tag 时，它也不起作用，我会通过 .otherwise

进行路由

Answer 1

发生这种情况是因为您的服务器知道 application/（并且 return 可能 application.html）但不知道 application/filter1/filter2/filter3/（因为 filter3.html 不存在）。

您可以：

决定只使用散列语法（服务器读取 # 之前的所有内容，让浏览器（在您的情况下，angular）管理之后的所有内容。
设置您的服务器，使以 application/* return 开头的每个路径都指向浏览器 application.html。

此外，我认为您需要从路线提供商中删除基地：

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

angular.js url 路由和 html5Mode(true)

angular.js url routing and html5Mode(true)

javascript

url

hashbang

angularjs

angular-routing