angular.js url 路由和 html5Mode(true)

Question

我想设置由 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/" />，这似乎可以正常工作，但是在通过 .otherwise-route 后重新加载页面或重新访问它不起作用并且服务器说“找不到页面”。

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

Answer 1

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

你可以：

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

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

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