查询字符串中带有可选参数的路由

Question

我有一个场景，其中只能执行一个值（id 或 age 或 sex）的搜索。

如果我使用下面只传递 id 的路由，

this.router.navigate(['details'],
{
     queryParams: 
     {
         id: this.id,
         age: this.age,
         sex: this.sex,
     }
 })

url 看起来像 http://path/details?id=10&age=&sex=

我希望我的 url 像

path/details?id=10 id 搜索

path/details?age=25 年龄搜索

所以我重构了我的代码，

if(this.id) {
    this.router.navigate(['details'],
    {
         queryParams: 
         {
             id: this.id
         }
     })
}else if(this.age){
    this.router.navigate(['details'],
    {
         queryParams: 
         {
             age: this.age
         }
     })
}else if(this.sex){
    this.router.navigate(['details'],
    {
         queryParams: 
         {
             sex: this.sex
         }
     })
}

有没有更好的方法重构代码来避免if语句

Answer 1

你可以简单地这样做，:

this.router.navigate(['details'],
{
     queryParams: 
     {
         id: this.id || null,
         age: !this.id && this.age || null,
         sex: !this.id && !this.age && this.sex || null
     }
 });

以上就是结果。

查询字符串中带有可选参数的路由

route with optional parameters in querystring

angular

angular-ui-router