AngularJS ui-router 如何为同一个状态做多个 URL 变体——比如 ngRoute 时答案

【问题标题】：AngularJS ui-router how to do multiple URL variants for the same state - like ngRoute whenAngularJS ui-router 如何为同一个状态做多个 URL 变体——比如 ngRoute 时
【发布时间】：2019-05-18 06:00:09
【问题描述】：

在 ngRoute 中你可以这样做：

let params = {
  template: "some template"
};

$routeProvider.when("/root/cardboards/deparments", params)
.when("/suppliers/:_supplier/cardboards/deparments", params);

如何使用 ui-router 实现同样的功能？

【问题讨论】：

标签： angularjs angular-ui-router ngroute

【解决方案1】：

如果你真的只有两种状态，你可以这样做：

$stateProvider.state({
    name: 'cardboardDepartments',
    url: '/root/cardboards/departments',
    template: 'my template'
})

$stateProvider.state({
    name: 'supplierCardboardDepartments',
    url: '/suppliers/{supplierId}/cardboards/departments',
    template: 'my template'
})

稍微充实的示例，假设 UiRouter > 1.0.0，使用父属性（而不是 parent.child 名称约定），并使用components。您可以使用$stateProvider 注册您的路线：

$stateProvider.state({
    name: 'root',
    url: '/root',
    component: 'rootComponent'
})

$stateProvider.state({
    name: 'cardboards',
    parent: 'root',
    url: '/cardboards',
    component: 'cardboardsComponent'
})

$stateProvider.state({
    name: 'cardboardsDepartments',
    parent: 'cardboards',
    url: '/departments',
    component: 'cardboardsDepartmentsComponent'
})

$stateProvider.state({
    name: 'suppliers',
    url: '/suppliers',
    component: 'suppliersComponent'
})

$stateProvider.state({
    name: 'supplier',
    parent: 'suppliers',
    url: '/:supplierId',
    component: 'supplierComponent'
})

$stateProvider.state({
    name: 'supplierCardboards',
    parent: 'supplier',
    url: '/cardboards',
    component: 'cardboardsComponent'
})

$stateProvider.state({
    name: 'supplierCardboardsDepartments',
    parent: 'supplierCardboards',
    url: '/departments',
    component: 'cardboardsDepartmentsComponent'
})

如果您确实有一个如上所示的嵌套结构，并且您希望保持父子关系，但嵌套多个 ui-views 没有意义，您应该查看named views。

如果您使用的是控制器和模板，您只需将这些状态定义上的组件属性替换为：

controller: 'cardboardsController',
template: 'your template'

您可以查看 UiRouter 的教程here。 guide 也是一个很好的资源。

【讨论】：