angularjs - UI-路由器 : Prevent access to parent state

Question

我要搬到UI-Router作为我的应用路由器。我想要嵌套状态如下:

$stateProvider
.state('app', {
      url: '/app',
      template: ' <div ui-view></div>',
      authenticate: true
    })
.state('app.state1', {
      url: '/state1',
      templateUrl: 'app/state1.html',
      controller: 'State1Ctrl',
      controllerAs: 'state1',
      authenticate: true
    })
.state('app.state2', {
      url: '/state2',
      templateUrl: 'app/state2.html',
      controller: 'State2Ctrl',
      authenticate: true
    })

我的 $state叫 app是别人的 parent 。它只包含一个 <div ui-view></div>模板。它不应该直接访问。我的意思是如果用户输入 /app在 URL 中，它们应该被重定向到 `app.state1`

如何防止我的用户这样做？

Answer 1

有a working example
让你的状态 abstract :

  .state('app', {
      url: '/app',
      abstract: true, // here
      template: ' <div ui-view></div>',
      authenticate: true
    })

并添加一些默认重定向:

  $urlRouterProvider.when('/app', '/app/state1');
  $urlRouterProvider.otherwise('/app/state1');

下面的前 2 个链接将重定向到“app.state1”

<a href="#/app"> // will be redirected to state1
<a href="#/app/state1">
<a href="#/app/state2">

doc about $stateProvider :

abstract (optional) boolean

An abstract state will never be directly activated, but can provide inherited properties to its common children states.

查一下 here