Question

我正在使用Angular UI路由器，我试图找出是否有办法使用$stateProvider重定向所有子状态。

例如，如果用户访问任何/contact州：

/contact/foo
/contact/bar
/contact/baz

他们将始终被重定向到/contact/about。

我的州设置如下：

$stateProvider
.state('contact', {
  url: '/contact',
  component: 'contact',
  redirectTo: 'contact.about'
})
.state('contact.about', {
  url: '/contact/about',
  component: 'contactAbout',
});

有没有办法将所有状态重定向到遵循此模式的contact.about：/contact/ANY_PATH。

感谢任何帮助。提前谢谢！

Answer 1

有两种方法可以实现这一目标。每种方式都假设ui-router 1.0 +

带参数

的状态

$stateProvider
.state('contact', {
  url: '/contact',
  component: 'contact',
  redirectTo: 'contact.about'
})
.state('contact.wildcard', {
  url: '/{rest:.*}',
  redirectTo: { state: 'contact.about', options: { replace: true } },
})
.state('contact.about', {
  url: '/about',
  component: 'contactAbout',
});

http://plnkr.co/edit/zfhEsWYP5LPmxbaULNVT?p=preview

URL。当规则

  $urlServiceProvider.rules.when('/contact/{rest:.*}', '/contact/about', { priority: -1 });

  $stateProvider
  .state('contact', {
    url: '/contact',
    component: 'contact',
    redirectTo: 'contact.about'
  })
  .state('contact.about', {
    url: '/about',
    component: 'contactAbout',
  });

priority: -1确保状态的网址在重定向后匹配，而不是再次触发.when规则。

http://plnkr.co/edit/gGFzNUMUqj4vGwXKX8ui?p=preview

Answer 2

有2个问题

如果我们的state存在
```
/contact/foo
/contact/bar
/contact/baz
```
如果您的states中有app.config，则不需要重定向，因为您可以设置contact.about的相同模板。

如果我们的state不存在
```
/contact/foo
/contact/bar
/contact/baz
```

但如果您的应用中没有states，该怎么办？

在这种情况下，您的ui-router会将其动态重定向到otherwise州。

<强>溶液

在ui-router的状态事件中，我们可以找到"$stateNotFound"来帮助我们，因此我们可以创建一个简单的不存在状态字典 which if this state not exist direct to x state。< / p>

主要控制器

app.controller("ctrl", ["$state", function ($state) {
   var pathname = window.location.pathname;
   $state.go(pathname);
}]);

要检测用户是否修改了网址手册，我们会在控制器中使用$state.go来调用$stateNotFound 上的app.run（本案例）

<强> app.run

$rootScope.$on("$stateNotFound", function (event, unfoundState) {
  event.preventDefault();

  switch (unfoundState.to) {
    case "/contact/foo":
        window.location.replace("/contact/about");
        break;
    case "/contact/bar":
        window.location.replace("/contact/about");
        break;
    case "/contact/baz":
        window.location.replace("/contact/about");
        break;
  }
});

Angular UI Router：重定向所有子状态

2 个答案:

带参数

URL。当规则