UI-Router : 阻止访问 parent 状态

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> 模板。它不应该直接访问。我的意思是，如果用户在 URL 中输入 /app，他们应该被重定向到 `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

UI-Router : 阻止访问 parent 状态

UI-Router : Prevent access to parent state

state

angularjs

angular-ui-router