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

Question

我认为这将是一个非常普遍的问题，但我找不到任何相关信息。我有两种状态，一种是在 /route 上访问，第二种是在 /route/{name} 上访问。如果我使用 ui-sref 调用第二条路线，它工作正常但是当我刷新页面或尝试通过 url 直接访问它时，我进入了 /route 页面，即使 url 在浏览器中保持不变。我该如何解决？

  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: {
        ...
      }
    });
  }

编辑： 为了说得更清楚，我希望 route2 的行为与具有完全不同 url 的任何其他州一样。我想如果 urls 是“/route1”和“/route2”，没有人会建议嵌套视图。如果那不可能，我会考虑在 route1 模板中使用嵌套视图。

Edit2: 问题不在于发布的代码。我有另一条路线“/route/:id”，但我没有定义类型。因此路线实际上是一样的。我定义了类型 ("/route/{id:int}")，现在可以使用了。

Answer 1

本例由

状态定义的顺序决定。 UI-Router 将迭代所有已定义的状态并尝试找到与 当前 url 匹配的状态。而第一场比赛将决定。

所以我们只需要将第二个声明为第一个:

$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

你试过这个吗，把状态和url改到下面

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

Answer 3

试试这个：

$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",
});

并且在您的 index.html 文件中：

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

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

UI Router: Access route directly using the url

javascript

angularjs

angular-ui-router