How to clear queryParams?


#1

I have a login screen that have 2 different UI: Normal login and Quick login. And I also have two button

{{#link-to 'login'}} Normal login {{/link-to}}
{{#link-to 'login' (query-params isQuickLogin=true)}} Quick login {{/link-to}}

For quick login button, I add a query param ‘isQuickLogin’, which is also declared in the controller.

If I click ‘Normal login’, it will navigate to login screen without param: http://localhost:4200/login

If I click ‘Quick login’, I will get the param, then I can render something for quick login: http://localhost:4200/login?isQuickLogin=true

However, If I click ‘Normal login’ again, the param is back. http://localhost:4200/login?isQuickLogin=true

That is not what I want, I have not add param for Normal Login, why did I get that param? Seems it is cached in somewhere, but I can not find it in the guide. I am referring to:

How to clear the query param? Can anyone help me? Thanks


#2

You have to manually set it. Since Controllers are singletons the queryParams stay what the my were. I would suggest the following:

{{#link-to 'login' (query-params isQuickLogin=false)}} Normal login {{/link-to}}
{{#link-to 'login' (query-params isQuickLogin=true)}} Quick login {{/link-to}}

You can think of queryParams as part of the route definition in the same way dynamic segments are.


#4

Thx, yes that works. But there are many login entry point in our project and many teams work on login. I can not ask them to manually set the flag one by one.:sob: The thing is there are many Normal Login entry, but only one Quick Login entry point, is there any other better solution I can pass parameter to login controller?


#5

You could use resetController to set the isQuickLogin back to false when leaving the login route?


#6

Yes yes, I agree with this.

export default Route.extend({
  resetController(controller) {
    controller.set(‘isQuickLogin’, false);
  })
});

Though I would caution that perhaps queryParams is not the best fit in this case. Maybe a different route or possibly a component that knows how to construct the link-to appropriately?

In any case the fast solution is what @raytiley suggested.


#7

Let me provide more detail: I have two different route: ‘main’ and ‘login’, the login entry point are in ‘main’ route.

What I want to do is pass a param from ‘main’ route to login controller when click the quick login entry. Is there any other solution for this case?:thinking:


#8

Thx, I agree with you, but my issue is login controller got wrong param when enter login route.:frowning_face: