Angular UI路由器:多个URL到一个状态

Angular UI-Router: Multiple URLs to single state

本文关键字：一个 状态 路由器 UI 多个 URL Angular      更新时间：2023-09-26

我已经开始使用angular的ui路由器，我正试图弄清楚如何让多个URLS引用一个状态。例如：

/orgs/12354/overview
//retyrns the same pages as
/org/overview

我的$state提供者目前设置了这样的东西，我不清楚如何在别名"/org/overview"路由中滑动，以便它正确地从"org"父级继承。

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '/overview',
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'
})

这可以使用when()实现。假设这是您想要用多个url指向的状态。

.state('app.home',
  {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })

在config()中，您可以按如下方式使用when()：

angular.module('myApp', [])
   .config($urlRouterProvider){
       $urlRouterProvider.when(/homepage, ['$state','$match', function ($state, $match) {
          $state.go('app.home');
 }]);
}

同样，您可以添加多个指向同一状态的url。

我认为您只需要定义没有url的子状态，如下所示。

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.1', {
  templateUrl: '/client/overview/one.html',
  controller: 'OverviewCtrl'
})
.state('org.2', {
  templateUrl: '/client/overview/two.html',
  controller: 'OverviewCtrl'
})
.state('org.3', {
  templateUrl: '/client/overview/three.html',
  controller: 'OverviewCtrl'
})

首先，抽象状态不会返回视图。

此外，由于列表视图使用复数orgs，项目视图使用单数org，因此不能使用附加路由，这是默认行为。

.state('org', {
  url: '/orgs',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '^/org/:orgID/overview'
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'
})
相关文章：