Angular ui-router父状态可选参数配置：子路由路径参数位置问题

这个问题我之前也碰到过，UI-Router的路由拼接逻辑确实容易在这种场景下卡壳。咱们可以通过调整父状态的URL配置+利用参数继承的方式来解决，既不用重复定义参数，又能实现你想要的路由格式，还让参数可选。

1. 重构父状态myParent的配置 #

首先把父状态的URL设为空，同时通过params属性统一定义需要的参数，这样所有子状态都能继承这些参数配置，不用重复写：

var myParent = {
  name: 'myParent',
  abstract: true,
  url: '', // 父状态URL为空，让子状态的URL占据路由开头
  params: {
    // 配置参数为可选，空值时自动压缩URL结构
    username: { squash: true, value: null },
    password: { squash: true, value: null }
  },
  resolve: {
    authorized: [ 'myService', '$stateParams', function (myService, $stateParams) {
      console.log($stateParams); // 这里依然能正常拿到username和password参数
      myService.doSomething(); // 你的业务逻辑
    } ]
  }
};

这里的squash: true是为了避免参数为空时URL出现多余的斜杠，value: null给参数设置默认空值，确保参数是可选的。

2. 修改子状态的URL格式 #

把子状态的URL调整为/mychild1(/:username/:password)，括号包裹的部分就是可选的参数段，这样就能支持两种访问方式：

• 不带参数：/mychild1
• 带参数：/mychild1/superman/superpassword

子状态代码示例：

var myChild1 = { 
  name: 'myChild1', 
  parent: 'myParent', 
  url: '/mychild1(/:username/:password)' 
  // 其他组件、模板配置...
};

var myChild2 = { 
  name: 'myChild2', 
  parent: 'myParent', 
  url: '/mychild2(/:username/:password)' 
  // 其他组件、模板配置...
};

因为父状态已经通过params定义了参数，子状态会自动继承这些配置，所以完全不用在每个子状态里重复写参数定义。

为什么这样可行？ #

• UI-Router的URL是父状态URL拼接子状态URL，父状态URL为空的话，子状态的URL就是完整路由的开头部分。
• URL里的()语法表示该段路由是可选的，对应的参数会自动变为可选，配合父状态params的配置，参数为空时不会在URL里留下冗余结构。
• 父状态的resolve依然能通过$stateParams获取到子状态URL里的参数，因为$stateParams会收集所有激活状态的参数集合。

这样就完美匹配你的需求了：路由格式符合预期、参数可选、还不用重复定义参数。

内容的提问来源于stack exchange，提问作者amigo21