javascript - 当用户使用 UI-Router 转换到其父状态时将用户定向到子状态

Question

考虑以下几点:

.state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'})
.state('manager.staffDetail', {url:'^/staff/{id}' , templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'})
  .state('manager.staffDetail.view', {url:'/view',  templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.history', {url:'/history' , templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}})
  .state('manager.staffDetail.edit', {url:'/edit',  templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}})

如果我转到 example.com/staff/1234/view，如何默认为 manager.staffDetail.view.schedule 子状态？

Answer 1

1. 首先，向abstract:true 的'manager.staffDetail.view' 状态添加一个属性。这不是必需的，但您想要设置它，因为您永远不会直接进入该状态，您总是会进入其中一个子状态。

2. 然后执行以下一个操作:

• 为 'manager.staffDetail.view.schedule' 状态提供一个空 URL。这将使它匹配与其父状态 URL 相同的 URL，因为它不会向父 URL 附加任何内容。

   `.state('manager.staffDetail.view.schedule', {url:'', ...`
  

• 或者，如果您想保持默认子路由的 URL 不变，请在您的 module.config 中设置一个重定向。此处的代码会将 '/staff/{id}/view' 的任何位置重定向到 '/staff/{id}/view/schedule' 的位置:

   `$urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');`