Question

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

  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的行为与任何其他具有完全不同网址的州一样。我想如果网址“/ route1”和“/ route2”，没有人会建议嵌套视图。如果那是不可能的，我会考虑在route1模板中使用嵌套视图。

编辑2：问题不在于发布的代码。我有另一条路线“/ route /：id”，但我没有定义类型。因此路线实际上是一样的。我定义了类型（“/ route / {id：int}”），现在它可以工作。

Answer 1

在这种情况下，状态定义的顺序决定。 UI-Router将迭代所有已定义的状态，并尝试找到与当前网址匹配的状态。第一场比赛将决定。

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

$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

你试过这个，把状态和网址改为

$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访问路由

3 个答案: