UI-Router 将 url 视为状态

Question

我的路由定义如下

$stateProvider
    ('MasterPage', {
        url: '/',
        templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
    url: 'dashboard',
    templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
    url: 'test/:id',
    templateUrl: 'views/test.html',
})
$urlRouterProvider.otherwise('/');

我有一些链接可以让我从主页导航到仪表板，然后导航到可以正常工作的测试页面。当我使用 id:1234 导航到测试页面时，这使我的 url 为<HOST>/#/test/1234，并尝试刷新它失败。它给了我一个错误说：

无法从“MasterPage.test”解析状态“MasterPage.test/1234”

为什么 UI-Router 将 url 段视为一种状态？

更新 我没有任何 ui-sref。我将使用$state.go('MasterPage.test', {id:1234}) 进入测试页面。

Answer 1

有working plunker

此问题通常与错误的ui-sref 设置有关

<a ui-sref="MasterPage.test/1234">

我们需要拆分并传递 1) 状态名称和 2) 状态参数，如下所示：

<a ui-sref="MasterPage.test({id:1234})">

如果我们想使用href，我们只需要连接parent和child url定义(parent '/', child 'test/:id') :

<a href="/test/1234">

扩展

所以，这些状态（几乎没有变化）：

    .state('MasterPage', {
      url: '/',
      templateUrl: 'views/master.html',
    })
    .state('MasterPage.dashboard', {
      url: 'dashboard',
      templateUrl: 'views/dash.html',
    })
    .state('MasterPage.test', {
      url: 'test/:id',
      templateUrl: 'views/test.html',
    })

将使用这些链接

  <a href="#/">
  <a href="#/dashboard">
  <a href="#/test/1234">
  <a href="#/test/9875">
  <a ui-sref="MasterPage">
  <a ui-sref="MasterPage.dashboard">
  <a ui-sref="MasterPage.test({id:2222})">
  <a ui-sref="MasterPage.test({id:4444})">

有working plunker