Angular ui-router extend url after path parameter

Question

ui-router 可以实现这种类型的路由吗？

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

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

 .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'
          }
        }
      })

Answer 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。

Angular ui-router extend url after path parameter

Angular ui-router extend url after path parameter

javascript

routes

angularjs

angular-bootstrap