angular-ui-router - 如何让 Angular UI 路由器尊重 "non-routed"URL

Question

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

我已将单页应用程序配置为在 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);
    }
])

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

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

谢谢，
蒂姆

Answer 1

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

问题的进一步讨论是here .

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

明确指向静态页面的链接 :通过包含属性 target="_self"在任何指向静态页面(即超出定义的 Angular 路由方案的页面)的链接中，它们将被 AngularJS 忽略并因此正确呈现。

禁用链接重写 :在 HTML5 模式下配置 Angular 路由时，支持两种语法格式。最简单的格式...
$locationProvider.html5Mode(true);
... 使用默认配置启用 HTML5 模式。但是，长格式语法提供了对其他配置属性的访问，其中之一通过禁用 Angular 拦截和重写链接 URL 的默认行为来解决上述问题:

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

我使用了第二个解决方案，它似乎对路由方案中定义的 URL 的行为没有不利影响。此解决方案似乎与 Angular UI Router 和 native AngularJS 路由同样适用。