Angular ui-router 在路径参数后扩展 url

【问题标题】：Angular ui-router extend url after path parameterAngular ui-router 在路径参数后扩展 url
【发布时间】：2015-12-11 14:20:36
【问题描述】：

这种类型的路由是否可以通过 ui-router 实现？

父状态 ---> /saved/:id 子状态 ---> /saved/:id/eat

下面是我的代码 sn-p。为什么我尝试这样做，页面被重定向到路由。

 .state('frouits.banana.saved', {
        url: '/saved/:id',
        views: {
          parameters: {
            templateUrl: 'banana.html'
          }
        }
      })state('frouits.banana.saved.eat', {
        url: '/saved/:id/eat',
        views: {
          parameters: {
            templateUrl: 'banana.html'
          }
        }
      })

【问题讨论】：

标签： javascript angularjs routes angular-bootstrap

【解决方案1】：

默认情况下，会附加 UI-Router 中的嵌套路由。由于frouits.banana.saved.eat 是frouits.banana.saved 的嵌套视图，因此它继承了它的url，这意味着您的路由解析为/saved/:id/saved/:id/eat

因此，您需要做的就是从第二条路由的 url 中删除 /saved/:id 部分。

.state('frouits.banana.saved.eat', {
    url: '/eat', // <--
    views: {
      parameters: {
        templateUrl: 'banana.html'
      }
    }
 });

您可以使初始示例工作的另一种方法是通过在您的路线之前添加一个插入符号来将您的路线声明为绝对路线 (url: '^/saved/:id/eat')。

有关嵌套路由如何工作的更多信息，refer to the docs。

【讨论】：