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

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

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

谢谢，添

Answer 1

经过一番调查后，我发现此问题与Angular UI路由器没有特别关系。原生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路由器和本机AngularJS路由一样。

如何让Angular UI路由器尊重＆＃34;非路由＆＃34;网址

1 个答案: