Polymer core-animated-pages默认页面

Question

I'm using the Polymer core-animated-pages to switch between my websites main pages.

I select which page needs to be shown by the id of that <section> . You can see a sample in action here . Now, the issue I'm having is that at loading of the page, the page that should be selected gets loaded from the url, eg www.example.com/home shows the home page, www.example.com/activities shows the activities page (code left out of example since not really relevant).

But what should I do when the id provided in the link doesn't exist? Is there an option to show a default core-animated-pages -page with a 404 message? Or do I have to check every link if it's in an array of all my pages, if so load the error page manually and else show the correct page?

Again, here's the example: jsbin .

Edit: To show the way my page handles linking, here's an update example: jsbin . Linking is essentially www.example.com/#home , etcetera

Answer 1

Something I'm missing from reviewing your example is how you're handling routing. In a typical site, if a user navigates to example.com/foo or example.com/#foo my expectation would be (using your current setup) that that would take you to the corresponding core-animated-pages page with the ID foo or a section which corresponds to that route.

Using routing (maybe the Polymer flatiron-director element), a basic solution might query the DOM in your element to see if a section of ID notsupportedURL can be found. If not, default to taking the user to your core-animated-pages 404 page, which doesn't have to be any more complex than what you have in place now.

Answer 2

There are a couple of things you could do here.

In the simplest case, you could just validate the value in the pageChanged handler. If the page doesn't exist, update it:

pageChanged: function(){ var foundPage = this.$.pages.querySelector('#' + this.page); if (! foundPage) { this.page = 'error' } ...

See: http://jsbin.com/xequvone/14/edit

If you don't bind the core-menu directly to the core-animated-pages , you can add whatever logic you want. The following version does exactly the same thing as the previous one, but uses a separate variable for the selected page:

http://jsbin.com/xequvone/12/edit

I think you'd want a router if your URL scheme was more complex. For example, if the hash includes multiple levels and parameters, such as #people , #/people/search or #/people/edit/12343 .