Question

我正在寻找有关如何在UI路由器路由中正确匹配/处理命名锚定哈希标记的文档/信息。不寻找滚动，只是让路线能够重新加载和匹配，例如/#about匹配我的'/'路线。我玩了一些正则表达式没有成功。似乎有一个合并的pull request来处理这个问题，但无法找到有关如何让路由器使用哈希标记处理浏览器重新加载的信息。

在调用诸如/#about之类的内容时，如何进行以下匹配？

.state('home', {
    url: '/',    
  })

现在直接在浏览器中加载http://localhost:8000/#about会导致找不到页面错误。我希望a）理想地保持URL原样（即不剥离散列）和b）拥有它和任何可能的命名锚点匹配归属路由。

以下是两个GH问题（612，510）但我不清楚它是否曾被解决，需要启用哪个标志/选项。

我在Angular 1.4.x上启用了HTML5模式。

Answer 1

这可以通过组合angular ui路由器中提供的一些实用程序来完成。您将不得不稍微调整服务，但是您获得$ state，$ location和$ urlMatcherFactory，获取所有状态，然后将数组过滤到与当前URL匹配的状态。然后，您针对该URL创建UrlMatcher，传入匹配的参数，然后导航到该状态。我尝试了$ urlRouter.sync，但它不起作用。

        if (!this.$state.current.name) {
            var allStates = this.$state.get(), loc = this.$location.path(), search = this.$location.search(), matcherFact = this.$urlMatcherFactory, matchedParams;
            var myCurrentState = allStates.filter(function(stateObj){
                if(stateObj.abstract){
                    return false;
                }
               var url = stateObj.url;
               var matcher = matcherFact.compile(url);
               var isMatch = matcher.exec(loc, search);
               if(isMatch){
                   matchedParams = isMatch;
               }
               return isMatch || null;     
            });
            var stateToGo = myCurrentState[0];
            if(stateToGo){
                this.$state.go(stateToGo.name, matchedParams);
            } else {
               window.location.reload(true);
            }

        }

在Angular UI Router

1 个答案: