Default page for animated polymer core pages

Question

I use Polymer core-animated-pages to switch between the main pages of websites.

I choose which page should be displayed with the identifier of this <section> . You can see the sample in action here . Now the problem is that when the page loads, the page to be selected is selected from the URL, for example, www.example.com/home shows the home page, www.example.com/activities shows the action page (code without example as it is really not relevant).

But what should I do if the identifier specified in the link does not exist? Is there an option to show the default core-animated-pages page with a 404 message? Or do I need to check every link if it is in the array of all my pages, if so load the error page manually and show the correct page?

Again, here is an example: jsbin .

Edit: To show how links to pages are linked, an update example is provided here: jsbin . Linking is basically www.example.com/#home etc.

Answer 1

There are a few things you can do here.

In the simplest case, you can simply check the value in the pageChanged handler. If the page does not exist, refresh it:

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

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

If you do not bind core-menu directly to core-animated-pages , you can add whatever logic you want. The next version does the same as the previous one, but uses a separate variable for the selected page:

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

I think you need a router if your URL scheme is more complex. For example, if the hash includes several levels and parameters, such as #people , #/people/search or #/people/edit/12343 .

Answer 2

Something I'm missing when looking at your example is how you handle routing. On a regular site, if the user goes to example.com/foo or example.com/#foo , my expectation will be (using your current setting), which will lead you to the corresponding core-animated-pages page with the id foo or section that matches to this route.

Using routing (perhaps the element is <polymer flatiron-director ), the basic solution can query the DOM in your element to find out notsupportedURL ID can be found. If not, by default, the user should be redirected to your core-animated-pages 404 page, which should not be more complex than what you currently have.