Search code examples
javascriptpolymer

Reloading a page every time it gets accessed


Is it possible to reload a page (like /home or /photos) every time the page gets accessed via the app-route element?

    <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
    </app-location>
    <app-route
    route="{{route}}"
    pattern="[[rootPath]]:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-home name="home"></my-home>
      <my-discover name="discover"></my-discover>
      <my-pages name="pages"></my-pages>
      <my-view404 name="view404"></my-view404>
    </iron-pages>

In my case I have used the Polymer Starter Kit and my web app contains several pages like /home and /discover that are all accessible via links in the drawer on the left side.

Right now the app however seems to keep the 'state' of a page or a menu was in even after I navigated to a different page within the app, like navigating to /discover from /home keeps the entire state of the page /home (scroll position, opened menus etc.) when I revisit the /home page.

I would like the app to freshly load a page every time the page gets accessed, so that it automatically discards the previous state the page was in. Is this possible with some onPageLoad in js or are there other options for the app-route element available?

Thanks!


Solution

  • Are there other options for the app-route element available?

    Not sure but I think no.

    By the way, that behavior comes from iron-location (included by app-location) as you can see in source. It just listen click event on body element so you can stop event propagation before it go to body.

    For example (didn't test)

    <dom-module>
      ...
        <a href='/discover' on-click='stopPropagation'>
      ...
        stopPropagation (event) {
          event.stopPropagation()
        }
      ...
    </dom-module>