UI路由器：直接使用URL访问路由

Question

I thought this would be a really common problem, but I can't find anything about this. 我认为这将是一个非常普遍的问题，但我找不到任何关于此问题。 I have two states one is accessed on /route and the second one on /route/{name} . 我有两个状态，一个在/route上访问，第二个在/route/{name} 。 It works fine if I call the second route using ui-sref but when I refresh the page or try to access it directly via url I get on the /route page even tough the url in the browser stays the same. 如果我所说的第二条路线用它工作正常ui-sref但是当我刷新页面或尝试直接通过URL我得到的访问/route页甚至艰难的在浏览器中的网址保持不变。 How do I fix that? 我该如何解决这个问题？

  function Routes($stateProvider) {

    $stateProvider.state("route1", {
      url: "/route",
      templateUrl: "js/route/route1.html",
      controller: "Route1Controller",
      controllerAs: "vm",
      resolve: {
        ...
      }
    })
    .state("route2", {
      url: "/route/{name}",
      templateUrl: "js/route/route2.html",
      controller: "Route2Controller",
      controllerAs: "vm",
      resolve: {
        ...
      }
    });
  }

Edit: To make it more clear, I would like that route2 acts like any other state with a complete different url. 编辑：为了使它更清楚，我希望route2像任何其他状态一样具有完全不同的URL。 I guess nobody would suggest nested views if the urls where "/route1" and "/route2". 我想如果网址“/ route1”和“/ route2”，没有人会建议嵌套视图。 If that's not possible I will consider using a nested view in the route1 template. 如果那是不可能的，我会考虑在route1模板中使用嵌套视图。

Edit2: The problem was not with the posted code. 编辑2：问题不在于发布的代码。 I had another route "/route/:id" but I didn't define the type. 我有另一条路线“/ route /：id”，但我没有定义类型。 Therefore the routes where actually the same. 因此路线实际上是一样的。 I defined the types ("/route/{id:int}") and now it works. 我定义了类型（“/ route / {id：int}”），现在它可以工作了。

Answer 1

The order of state definition decides in this case. 在这种情况下，州定义的顺序决定。 The UI-Router will iterate all defined states and try to find the one - which matches to current url . UI-Router将迭代所有已定义的状态并尝试找到与当前url匹配的状态。 And the first match will decide. 第一场比赛将决定。

So we just have to declare the scond one as the first: 所以我们只需将第二个声明为第一个：

$stateProvider
// this will be defined as the first 
.state("route2", {
  url: "/route/{name}",
  ...
  }
})
// if no match for /route/param
// this will be used
.state("route1", {
  url: "/route",
  ...
});

Answer 2

have u tried this, change the state and url to below 你试过这个，把状态和网址改为下面

$stateProvider
    .state('route1', {            
        url: '/contacts',
    })
    .state('route1.name', {            
        url: '/{name}'
        //...more
    })

Answer 3

try this : 尝试这个：

$stateProvider.state("route1", {
  url: "/route",
  templateUrl: "js/route/route1.html",
  controller: "Route1Controller",

})
.state("route1.name", {
  url: "/{name}",
  templateUrl: "js/route/route1-name.html",
  controller: "Route1NameController",
});

And in your index.html file : 在index.html文件中：

<body>
    ...
    <div ui-view></div>
    ...
</body>

UI路由器：直接使用URL访问路由

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-03-04 11:59:24

解决方案2
1 2015-03-04 11:59:39

解决方案3
1 2015-03-04 12:49:14

UI路由器：直接使用URL访问路由

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-03-04 11:59:24

解决方案2 1 2015-03-04 11:59:39

解决方案3 1 2015-03-04 12:49:14

解决方案1
1 已采纳 2015-03-04 11:59:24

解决方案2
1 2015-03-04 11:59:39

解决方案3
1 2015-03-04 12:49:14