CODEWITHSUNDEEP
polymerpolymer-1.0
tschiela
tschiela

Reputation: 5271

How to changeURL via data of app-route element

Is it possible to change the URL via changing the app-route data object in polymer? Like described here: https://www.polymer-project.org/1.0/toolbox/routing#change-routes

In this example they are using this.set('routeData.user', 'mary'); to change the URL.

In our case its not working and we cant find the problem in our code. We nearly removed all our code and just using this app-router configuration:

<app-route route="{{route}}"
           pattern="/:view"
           data="{{routeData}}">
</app-route>

In our attached lifecycle event we are using this:

attached: function(){
    var self = this;

    setTimeout(function(){
      self.set('routeData.view', 'GNAAA');
    });
  }

Expected URL in address bar is http://localhost:8888/polymer/index.html#/GNAAA

But we only got http://localhost:8888/polymer/index.html#/

What are we missing here. Why we cant set the URL via the data object as mentioned in the docs? Maybe its a bug? But we cant find something on the GutHub Buglist of app-route.

UPDATE: We are also using iron-location to get query params from URL. If we remove iron-location all works as expected. So we currently created an issue on github.

Upvotes: 3

Views: 878

Answers (1)

Spiny Norman
Spiny Norman

Reputation: 8337

Try adding <app-location route="{{route}}"></app-location> before your <app-route> statement.

Or, if you prefer to use iron-location, use iron-route-converter:

<iron-location path="{{path}}" query="{{query}}"></iron-location>
<iron-query-params
    params-string="{{query}}"
    params-object="{{queryParams}}">
</iron-query-params>
<app-route-converter
    path="{{path}}"
    query-params="{{queryParams}}"
    route="{{route}}">
</app-route-converter>

Also, don't forget to import all used components with <link rel="import"> tags or your components will not work, without telling you about it.

Upvotes: 0

Related Questions