back button doesn't work with hash routing with empty route

[davidmaxwaterman]

Description

I'm using the starter kit and added the use-hash-as-path option to the app-location element to make it use hash routing. Unfortunately, the back button doesn't seem to work properly...

Expected outcome

back button works as usual

Actual outcome

using back button changes the url but doesn't cause the page to go back to the previous if previous was empty route

Steps to reproduce

1. Build starter kit as per https://www.polymer-project.org/1.0/start/toolbox/set-up
2. Add user-hash-as-path option to app-location element and change the view anchors to start with '/#'. eg href="/#/view1" and the same for the other two
3. run polymer serve and open browser on http://localhost:8080
   3+ see view1
4. click the view2 anchor
   4+ url changes to localhost:8080/#/view2 and page changes to view2
5. click the view3 anchor
   5+ url changes to localhost:8080/#/view3 and page changes to view3
6. click the browser's back button
   6+ the url changes to localhost:8080/#/view2 and the page changes to view2
7. click the browser's back button
   7+ the url changes to localhost:8080, but the page does not change from view2 - it should be view1

It seems like _routePageChanged isn't called for the page change that fails, and indeed my-app.routeData.page is still 'view2'. app-route.data is still 'view2', as expected. app-route.route.path is "", so that's correct.

chrome 54.0.2840.100 64-bit on ubuntu 16.04.1 LTS

[vorcigernix]

route.path is ""? How about adding path observer like:

observers: ['_pathChanged(route.path)'], _pathChanged: function() { this.async(function() { if (!this.route.path) { this.set('route.path', '/#/view1'); } }); },

[davidmaxwaterman]

I managed to get it working how I want - it went something like this :

      _routePageChanged(page) {
        if (page) {
          // set the page so that the view element is loaded
          this.page = page;

          // change the browser location
          window.history.pushState({}, null, `#/${page}`);
          window.dispatchEvent(new CustomEvent('location-changed'));
        }

        // - some redirection based on if the user - probably only applies to my setup
        //   since view1 is a login page and if the user is logged in, I change the route
        //   to the view2
        // - most probably just want the 'else' part
        if (this._isUserLoggedIn()) {
          this.set('route.path', '/my-view2');
        } else {
          this.set('route.path', `/${page}`);
        }
      },

The key to me figuring out what was going on was that this.page has nothing to do with the routing, and only serves to load the view elements. I'm not sure why it can't be a simple private method called '_loadView(view)' or something, but perhaps there's something more in the original code. In any case, setting this.page doesn't change any route - that should be done with this.set('route.path', '/my-viewX'); - of course, it makes sense to do that *after* loading the element by setting this.page- though I suspect that can is better done in the 'onload' callback to importHRef(), or even on a 'ready' event emitted in the view'sready()callback - or is that the same as theonload`? I'd guess not. I wonder if there are a set of events emitted that correspond to the lifecycle callbacks...I could find any mentioned in the docs.