title: Polymer routing when refreshing
body: <p>I am currently working on a polymer application and my previous application was also built with polymer. In the previous app I did the routing and it worked perfectly. </p>
  
  <p>I went back to the old code and tried to implement it in the new app with total failure. </p>
  
  <p>I cannot for the life of me see what I have done differently. </p>
  
  <pre><code>   &lt;link rel="import" href="app-theme.html"&gt;
  &lt;link rel="import" href="bower_components/paper-button/paper-button.html"&gt;
  &lt;link rel="import" href="routing-element-two.html"&gt;
  
  &lt;dom-module id="routing-element-one"&gt;
  &lt;template id="test-element-template"&gt;
      &lt;style include="iron-flex"&gt;
  
      &lt;/style&gt;
      &lt;app-location route="{{route}}"&gt;&lt;/app-location&gt;
  
      &lt;app-route
          route="{{route}}"
          pattern="/polymerui/:page"
          data="{{routeData}}"&gt;
      &lt;/app-route&gt;
          test one
      &lt;paper-tabs selected='{{routeData.page}}' attr-for-selected='key'&gt;
        &lt;paper-tab key='main'&gt;main&lt;/paper-tab&gt;
        &lt;paper-tab key='document'&gt;document&lt;/paper-tab&gt;
        &lt;paper-tab key='baz'&gt;Baz!&lt;/paper-tab&gt;
      &lt;/paper-tabs&gt;
  
      &lt;neon-animated-pages selected='{{routeData.page}}'
                       attr-for-selected='key'
                       entry-animation='slide-from-left-animation'
                       exit-animation='slide-right-animation'&gt;
        &lt;neon-animatable key='main'&gt;Foo Page Here&lt;/neon-animatable&gt;
        &lt;neon-animatable key='document'&gt;Bar Page Goes Here&lt;/neon-animatable&gt;
        &lt;neon-animatable key='baz'&gt;Baz Page, the Best One of the Three&lt;/neon-animatable&gt;
      &lt;/neon-animated-pages&gt;
  
      &lt;!-- &lt;routing-element-two route={{tailData}}&gt;&lt;/routing-element-two&gt; --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      MyLists = Polymer({
        is: 'routing-element-one',
  
        properties: {
  
        },
        behaviors: [Polymer.IronResizableBehavior],
        listeners: {
            'iron-resize':'_handleResize',
            'change-content':'_changeContent',
            'update-portlet' : '_updatePortlet'
        },
  
        observers: [
          '_routeChanged(route.*)',
          '_viewChanged(routeData.view)'
        ],
        _routeChanged:function(e){
            e;
        },
      _viewChanged:function(view) {
            // load data for view
          }
      });
  &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>This is just my test page to get it working. When I change tab the url updates /polymerui/ + main, document, baz!. Great all good but when I refresh 404.</p>
  
  <p>I just do not see what I have done differently to last time. The obvious thing is that if I search for /polymerui/main for example, that doesn't exist. My point is how the hell did I get it working last time?</p>
  
  <p>p.s. I did not use a hash last time.</p>