Polymer, how to get url params in page.js in polymer element?

Question

I want to create a single page application. When I go to a path like localhost/person-info/101 , how can I get the URL parameters using page.js into a Polymer element?

I need to use these options to select or change data in the person-info element before using neon-animated-page to change the page

The content of app.js :

 window.addEventListener('WebComponentsReady', function () { var app = document.querySelector('#app'); page('/', home); page('/person-info/:user', showPersonInfo); page({ hashbang: true }); function home() { app.route = 'index'; console.log("app route" + app.route); console.log("home"); } function showPersonInfo(data) { console.log(data); console.log(data.params.user); app.params = data.params; app.route = 'person-info'; } }); 

And my element is Polymer person-info.html

 <link rel="import" href="bower_components/iron-list/iron-list.html"> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> <script type="text/javascript" src="bower_components/jquery-2.1.4.min/index.js"></script> <script src="js/app.js"></script> <dom-module id="person-info"> <style> :host { display: block; font-family: sans-serif; @apply(--layout-fit); @apply(--layout-vertical); } .toolbar { background: #3f78e3; } a { color:#FFF; } </style> <template id="person-info"> <paper-toolbar class="toolbar"> <a href="/"> <paper-icon-button icon="icons:arrow-back"></paper-icon-button> </a> <div>test</div> <div>test</div> </paper-toolbar> <content></content> </template> <script> Polymer({ is: 'person-info', ready: function () { console.log("person-info page"); this.testdd = "adisak"; console.log("user ---->"+this.params); console.log(this); }, properties: { dataindex: String } }); </script> </dom-module> 

Answer 1

The app variable is global, so if you bind data to app.params from your route, you can access it everywhere using app.params. Or simply access the element and set properties for your element, as shown below.

 function showPersonInfo(data){ var personInfo=document.querySelector('person-info'); personInfo.user=data.params; app.route = 'person-info'; } 

From your person-info element, you can access using this.user , but I think you need to set the user property on the element properties.