ui-router添加多个URL查询参数失败问题求助

这里有两个关键错误导致你的参数无法正常被解析，我来帮你逐个修正：

1. ui-router状态中多查询参数的定义格式错误 #

你在URL里用了多个?来分隔查询参数，这不符合ui-router的规则。多个查询参数应该用&来分隔，而不是重复的?。

错误写法： #

.state('addinEdit', {
  url: '/addin/edit/{id}?connected?ifi', // 这里的第二个?是错误的
  resolve: {
    test: [$stateParams, function($stateParams) {
      console.log($statePrams.connected) // 还有拼写错误：$statePrams → $stateParams
      console.log($statePrams.ifi)
    }]
  }
})

正确写法： #

.state('addinEdit', {
  url: '/addin/edit/{id}?connected&ifi', // 用&分隔多个查询参数
  resolve: {
    test: ['$stateParams', function($stateParams) {
      console.log($stateParams.connected); // 修正拼写错误
      console.log($stateParams.ifi);
    }]
  }
})

2. HTML链接中多查询参数的传递格式错误 #

浏览器URL的规则是：第一个?用来标记查询参数的开始，后续所有参数都必须用&来分隔。你用了第二个?，导致浏览器把它当成普通字符进行URL编码（变成%3F），所以ifi=true会被当成connected参数值的一部分，而不是独立的查询参数。

错误写法： #

<a href="addin/edit/?connected=true?ifi=true" target="_self">New</a>

正确写法： #

<a href="addin/edit/?connected=true&ifi=true" target="_self">New</a>

这样修改后，浏览器地址栏会正确显示https://localhost:3000/1/#/addin/edit/?connected=true&ifi=true，ui-router也能正常解析connected和ifi两个参数了。

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