Question

我正在转移UI-Router作为我的App路由器。我希望嵌套状态如下：

$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，是其他人的父母。它只包含<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 （可选） boolean

抽象状态永远不会被直接激活，但可以为其常见子状态提供继承属性。

检查here

UI-Router：阻止访问父状态

1 个答案: