如何让 Angular UI 路由器尊重“非路由”URL

Question

这是我第一次使用 AngularUI Router，所以我想我犯了一个新手错误，希望有人能指导我。

我已经配置了一个单页应用程序以在 HTML5 模式下使用 Angular UI Router，而且一切似乎都按预期工作。

.config([
    "$stateProvider", "$urlRouterProvider", "$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state("concept", {
            url: "/concepts/:conceptKey",
            templateUrl: "/templates/concept-view.html",
            controller: "conceptViewController",
            resolve: {
                concept: [
                    "$stateParams", "conceptsApi",
                    function ($stateParams, conceptsApi) {
                        return conceptsApi.getConcept($stateParams.conceptKey);
                    }
                ]
            }
        });

        $urlRouterProvider.otherwise("/");

        $locationProvider.html5Mode(true);
    }
])

但是，同一页面还包含一些指向同一站点上其他静态页面的链接，这些链接使用相对 URL。在安装 Angular 路由之前，这些链接可以正常工作，但现在它们已损坏。具体来说，点击其中任何一个链接会正确更改浏览器地址栏，但不会触发导航到该目标页面。

我假设我需要添加一些内容来告诉路由配置忽略某些 URL 模式，但我没有找到任何信息来告诉我如何执行此操作。请问有什么建议吗？

谢谢， 蒂姆

Answer 1

经过一番调查，我发现这个问题与 Angular UI Router 没有特别的关系。同样的行为也存在于原生 AngularJS 路由机制中，是由$location 实现的链接重写逻辑引起的，如this documentation 中所述。

问题的进一步讨论是here。

我找到了两种可能的解决方案，似乎都很好用：

明确定位到静态页面的链接：通过在任何指向静态页面（即不属于定义的 Angular 路由方案的页面）的链接中包含属性 target="_self"，它们将被 AngularJS 忽略，因此正确渲染。

禁用链接重写：在 HTML5 模式下配置 Angular 路由时，支持两种语法格式。最简单的格式...

$locationProvider.html5Mode(true);

... 使用默认配置启用 HTML5 模式。但是，长格式语法提供了对其他配置属性的访问，其中之一通过禁用 Angular 截取和重写链接 URL 的默认行为来解决上述问题：

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    rewriteLinks: false
});

我使用了第二种解决方案，它似乎对路由方案中定义的 URL 的行为没有不利影响。这个解决方案似乎同样适用于 Angular UI 路由器和原生 AngularJS 路由。