CODEWITHSUNDEEP
polymer
akc42
akc42

Reputation: 5001

How can force a route change from javascript when using `<app-location>`

I am moving over to using <app-location> and <app-route> for my navigation in my Polymer app. I require my users to login first (if they haven't already) which is done outside the scope of routing. So once logged in, or if they were already logged in, the app will start on the page entered in the browser url bar.

I have a scenario where its the first time the user has attempted to login, and so will need to be redirected to a different page to fill in their profile. What I would like to do programatically from javascript is push a new url at the application so they are redirected to a profile page after logon, and then have the profile page simulate the browser back button to return to the originally entered starting page.

How do I do that in a compatible way with <app-location>, assuming I am NOT using # routing.

Upvotes: 2

Views: 1856

Answers (1)

&#220;mit
&#220;mit

Reputation: 17489

If you have two way binding between <app-location> and <app-route> you can simply change the data property of your <app-route> to profile for example.

So for example if your setup looks something like this: 

  <app-location route="{{route}}"  id="appLocation" use-hash-as-path></app-location>
  <app-route id="appRoute"
        route="{{route}}"
        pattern="/:page"
        data="{{page}}"
        tail="{{tail}}">
  </app-route>

You can do something like this:

this.$.appRoute.data = {page:'profile'}

Or if you page is a property that is bound in your element/app you can simply update the page property which in turn will update the data property of your <app-route> element and eventually the route property of your <app-location> element through the data-binding system.

Upvotes: 1

Related Questions