Polymer deep app-routing not changing url

Question

I'm having problems with app-route (mainly because I don't understand it). The specific issue I'm having is changing the url/route. I'm using an iron-selector on an app-drawer to change the iron-page view. The view is switching, but the url is not updating. The other issue is that in one of my views I need to switch to a detail-view (think /events -> /event/:id). I am not sure of the correct way to change a view inside a view.

Enough talk - lets look at some code

The structure of the application is as follows:

/login

/admin
/admin/view1
/admin/view1/:id
/admin/view2

/user
/user/view1
/user/view1/:id
/user/view2

my-app has an iron-pages element that holds the views for login-page, admin-portal, and user-portal. admin-portal and user-portal each have iron-pages that holds view1, view2, etc.

user-portal

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/user/:view"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

<iron-selector attr-for-selected="name" selected="{{routeData.view}}" fallback-selection="clinics">
  <vaadin-item name="clinics">
    <iron-icon icon="vaadin:list-select"></iron-icon>
    Virtual Clinics
  </vaadin-item>
  <vaadin-item name="settings">
    <iron-icon icon="vaadin:cog-o"></iron-icon>
    Settings
  </vaadin-item>
  <vaadin-item name="help">
    <iron-icon icon="vaadin:info-circle-o"></iron-icon>
    Help
  </vaadin-item>
  <vaadin-item name="logout">
    <iron-icon icon="vaadin:exit-o"></iron-icon>
    Sign Out
  </vaadin-item>
</iron-selector>

<iron-pages selected="[[routeData.view]]"
  attr-for-selected="name"
  selected-attribute="visible"
  fallback-selection="view404">
  <user-clinic-list-view name="clinics" events="{{events}}" user="{{user}}"></user-clinic-list-view>
  <user-clinic-view name="event" route="{{subroute}}"></user-clinic-view>
  <user-setting-view name="settings" route="{{subroute}}"></user-setting-view>
  <user-help-view name="help" route="{{subroute}}"></user-help-view>
  <my-view404 name="view404"></my-view404>
</iron-pages>

user-clinic-list-view In this view I have an iron-list with a button that needs to take me to user-clinic-view but where I change the route to something like /event/:id

I have tried <a href="/user/event/:id"></a>

I have also tried

window.history.pushState({}, null, '/user/event/:id');
window.dispatchEvent(new CustomEvent('location-changed'));

This seems like a very basic web application, and yet the routing in Polymer is so confusing and there are no examples of deep routing. Every example I've seen is only 1 layer deep (like the starter kit).

What are some best practices for routing?