如何为 ui-router 编写到最近父位置的通用 url 路由规则

Question

我正在使用 ui-router 作为 Angular (1.4) WebApp。一切都很好，但是 URL 重定向规则。我知道我可以在 URL 未知时定义一组重定向规则。但我想让它更高级。我想将请求重定向到最近的父位置。

这是一个简化的案例：

/                       // --> index.html
/apps/app/:id           // --> app.html
/apps/app/:id/status    // --> app.status.html
/unknown/path           // --> no path segment is registered at all, so redirect to index.html

MY WISH:
/apps/app/:id/unknown   // --> app.html (not redirect to index.html)

对应代码如下：

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('index', {
      url: '/',
      templateUrl: 'index.html'
    }).
    .state('app', {
      url: '/apps/app/:id',
      templateUrl: 'app.html'
    })
    .state('app.status', {
      url: '/apps/app/:id/status',
      templateUrl: 'app.status.html'
    });

  $urlRouterProvider.otherwise('/');

}])

在实际项目中，状态规则有20多个。但是重定向到 index.html 不是用户友好的。我正在寻找一种将页面重定向到最近页面的聪明方法。

解决方案

现在我找到了解决方案。注意 _.initial 来自 underscorejs.

$urlRouterProvider
  .otherwise(function($injector, $location) {
    var parentUrl = _.initial($location.path().split('/')).join('/');
    $location.path(parentUrl);
  });

Answer 1

您可以通过以下方式处理更复杂的重定向：

$urlRouterProvider.otherwise(function($injector, $location){
    // handle each case here
});

ui-router otherwise

如何为 ui-router 编写到最近父位置的通用 url 路由规则

How to write a common url routing rule to nearest parent location for ui-router

redirect

routes

rule

angularjs

angular-ui-router

解决方案