如何让 Angular UI 路由器遵守 "non-routed" URL

Question

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

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

.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);
    }
])

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

我想我需要添加一些东西来告诉路由配置忽略某些 URL 模式，但我还没有找到任何信息来告诉我如何做到这一点。有什么建议吗？

谢谢，蒂姆

Answer 1

经过一些调查，我发现这个问题与 Angular UI 路由器没有特别的关系。同样的行为也存在于原生 AngularJS 路由机制中，并且是由 $location 实现的 link 重写逻辑引起的，如 this documentation.[=16= 中所述]

问题的进一步讨论是here。

我找到了两个可能的解决方案，它们似乎都运行良好：

明确将 links 定位到静态页面：通过在任何 links 中包含属性 target="_self" 到静态页面（即页面超出定义的 Angular 路由方案）它们将被 AngularJS 忽略，从而正确呈现。

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

$locationProvider.html5Mode(true);

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

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

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

如何让 Angular UI 路由器遵守 "non-routed" URL

How to get Angular UI Router to respect "non-routed" URLs

angular-ui-router