How to route from an <iron-ajax> callback - ajax

Question

Given a root component in index.html (my-app) containing iron-pages, and an iron-ajax call inside one or more of those pages, what is the best way for an iron-ajax on-response function in a child component to tell my-app to change the route? I am using Polymer 2. I see examples relying on links in different components, and calls in the same component, but no iron-ajax from one component to its parent.
In my-app.html I have an app-location and app-route, and the iron-pages:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-toolbar>...
<iron-pages role="main" selected="[[routeData.page]]"
attr-for-selected="name" selected-attribute="visible"
fallback-selection="404">
<my-login name="" route="[[subroute]]"></my-login>
<my-todos name="my-todos" route="[[subroute]]"></my-todos>
...
<my-404-warning name="404"></my-404-warning>
</iron-pages>
The user first sees my-login. When the iron-ajax in my-login call completes, I want to replace my-login with my-todos. I’ve come up with two approaches so far (see below). Both work--changing the page and updating the URL--but is one necessarily better? Is there a cleaner approach I’ve not found?
The iron-ajax on-response handler in my-login
_handleLogin(e) {
if (e.detail.response) {
let loginInfo = e.detail.response;
if (loginInfo.o_error) {
console.log('login error: '+loginInfo.o_error);
// ...
} else {
this.dispatch('login', loginInfo); // to polymer-redux store
// UPDATE PATH, OPTION #1
var page = this.ownerDocument.body.children[0];
page.set('route.path', 'server-catalog');
// UPDATE PATH, OPTION #2
this.dispatchEvent(new CustomEvent('change-route', {
bubbles: true, composed: true, detail: "my-todos" }));
// UPDATE PATH, OPTION #3..n
???
}
} else {
console.log(e.detail);
}
}
Both options trigger the observer, _routePageChanged(routeData.page), and so the magic proceeds.
Option #1 is straightforward, but involves reaching directly into the parent, my-app.
Option #2 relies on two additions to my-app:
ready() {
super.ready();
// Custom elements polyfill safe way to indicate an element has been upgraded.
this.removeAttribute('unresolved');
// listen for custom events
this.addEventListener('change-route', (e)=>this._onChangeRoute(e));
}
_onChangeRoute(e) {
this.set('route.path', e.detail);
}
Option #2 feels better, but I’m wondering if it’s the cleanest I can do.

Answer 1

It's recommended to pass routeData into <my-login> via data binding, and set routeData.page = "my-todos" in your _handleLogin()

Answer 2

I found a third way (and one I think I'll use) in the app-location docs: "app-location fires a location-changed event on window when it updates the location". So,
window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));