Question

使用UI路由器我需要将URL与其中包含的哈希（片段）匹配（HTML5模式）。

word-break: break-word

虽然上面的设置在下面使用ui-sref时有效..

.state('myState', {
            url: '/path/:id/page#:section',
            templateUrl: 'template.html',
            controller: 'MyController'
        });

..当我通过在地址栏中指定片段（或者在完全不同的站点上点击包含哈希的链接）手动将浏览器从其他页面重定向时，它失败了，在这种情况下，URL匹配器尝试与URL匹配哈希和我被迫创建一个新的人工状态，它与上面相同但没有哈希和param <a ui-sref="myState({id: 1})"> ... // without hash => section == '' <a ui-sref="myState({id: 1, section: 'abc'})"> ... // section == 'abc'在它的url属性中。但这让我无法获得包含哈希值的可收藏URL。

我需要有一个状态，其中此片段param是可选的，并且在重定向到保留给定section参数（如果存在）的页面时，通过url匹配机制正确匹配应用内状态转换。

Answer 1

我使用# param来解决此问题：

<a ui-sref="myState({id: 1})"> ... // without hash => # == ''
<a ui-sref="myState({id: 1, '#': 'abc'})"> ... // # == 'abc'

状态定义中的URL没有哈希值：

url: '/path/:id/page',

这与页面加载时的状态与URL中的哈希相匹配，但它仍然没有在状态参数中设置#值。我通过在$stateChangeStart事件处理程序中手动设置参数来解决这个问题：

 $rootScope.$on('$stateChangeStart',
      function(event, toState, toParams, fromState, fromParams) {
            var hash = $location.hash();
            if (hash) {
                 toParams['#'] = hash;
            }
      }

UI路由器匹配url与哈希（片段）

1 个答案: