Проблемы с приложением Polymer с кнопкой возврата

Question

Я приложил свой код ниже, чтобы, надеюсь, добавить контекст.

При нажатии кнопки "Назад" в браузере или переходе к списку после перехода на страницу сведений он не "обновляется" должным образом.

Например, я нахожусь на странице, по которой я попал по этому пути. URL / материя - выбор вопроса из списка. URL / материя /6719 - просмотр деталей и возможность просмотра списка сторон, связанных с ним. url/material /6719/matparties - список связанных сторон

Если я теперь перехожу к URL / вопросам либо с помощью меню, либо с помощью кнопки "Назад" (без обновления страницы), кажется, что перезагрузка маршрута в app-route не происходит, чтобы увидеть, что он больше не является идентификатором, поскольку он переводит меня к на странице с подробностями по этому вопросу я уже щелкнул.

Я прочитал документацию по API и чувствую, что когда я нажимаю на каждую страницу, мне нужно как-то перезагружать элемент app-route, но я не могу узнать, как?

Сценарий для добавления некоторого контекста -

Я строю приложение Polymer 2 с помощью app-routing, мне здесь помогли, как его использовать.

Я достиг желаемого результата, но у меня есть чувство, что я не пойду правильно.

Я хочу, чтобы можно было нажимать на ссылку / вопросы - перейти к списку вопросов. URL / дела /6719 - просмотреть подробную информацию по одному вопросу. URL / дела /6719/matparties - вернуть список сторон, ссылающихся на URL / стороны вопроса - список все стороны. url/party /123 - информация о вечеринке (переход от matParties или Party)

Этого я добился с помощью набора выражений Dom-if на странице "Мой вопрос". (это то, что я не уверен, использовал ли я лучшую практику)

Я передаю маршрут к странице вопроса со страницы моего приложения, как показано ниже.

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="utils/take-command.html">

<link rel="lazy-import" href="my-home.html">
<link rel="lazy-import" href="my-matters.html">
<link rel="lazy-import" href="my-parties.html">
<link rel="lazy-import" href="my-filenotes.html">
<link rel="lazy-import" href="my-feenotes.html">
<link rel="lazy-import" href="my-doclog.html">
<link rel="lazy-import" href="my-reminders.html">
<link rel="lazy-import" href="my-view404.html">

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

    <app-drawer-layout fullbleed force-narrow narrow="{{narrow}}">
      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="home" href="[[rootPath]]home">Testing</a>
          <a name="matters" href="[[rootPath]]matters">Matters</a>
          <a name="parties" href="[[rootPath]]parties">Parties</a>
          <a name="filenotes" href="[[rootPath]]filenotes">File Notes</a>
          <a name="feenotes" href="[[rootPath]]feenotes">Fee Notes</a>
          <a name="doclog" href="[[rootPath]]doclog">Document Log</a>
          <a name="reminders" href="[[rootPath]]reminders">Reminders</a>


        </iron-selector>
      </app-drawer>

      <!-- Main content -->
      <app-header-layout has-scrolling-region>

        <app-header slot="header" condenses reveals effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
            <paper-icon-button icon="my-icons:shape" id="myButton">Show dialog</paper-icon-button>
            <div main-title>LegalSuite Software</div>

          </app-toolbar>
        </app-header>

        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            role="main">
          <my-home name="home"></my-home>
          <my-matters name="matters" route="[[subroute]]"></my-matters>
          <my-parties name="parties" route="[[subroute]]"></my-parties>
          <my-filenotes name="filenotes"></my-filenotes>
          <my-feenotes name="feenotes"></my-feenotes>
          <my-doclog name="doclog"></my-doclog>
          <my-reminders name="reminders"></my-reminders>

          <my-view404 name="view404"></my-view404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>

    <vaadin-dialog id="vaadinGrid">
        <template>
         <take-command></take-command>
        </template>
      </vaadin-dialog>

  </template>

  <script>

    Polymer.setPassiveTouchGestures(true);

    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: Object,
          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          rootPath: String,
        };
      }

ready() {
        super.ready();
        this.$.myButton.addEventListener('click', e => {this._handleClick(e)});
      }

      _handleClick(e) {
        this.$.vaadinGrid.opened = true;
        console.info(e.target.id + ' was clicked.');
      } 

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'matters' in that case.
        this.page = page || 'matters';

        // Close a non-persistent drawer when the page & route are changed.
        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      }

      _pageChanged(page) {
        // Load page import on demand. Show 404 page if fails
        const resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        Polymer.importHref(
            resolvedPageUrl,
            null,
            this._showPage404.bind(this),
            true);
      }

      _showPage404() {
        this.page = 'view404';
      }
    }

    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

// Вторая страница

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="Matters/matter-list.html">
<link rel="import" href="MatParties/matparty-list.html">
<link rel="lazy-import" href="Matters/matter-detail.html">


<dom-module id="my-matters">


  <template>

    <app-route route="{{route}}" pattern="/:matter_id" data="{{routeData}}" tail="{{subroute}}">
      <app-route route="{{subroute}}" pattern="/matparties/:this_page" data="{{pageData}}"></app-route>
    </app-route>

    <div class="card">
        <template is="dom-if" if="[[_subidIsDefined(pageData.this_page)]]">
            <matparty-list linkedmatpartyid="[[pageData.this_page]]"></matparty-list>
          </template>
<template is="dom-if" if="[[!_subidIsDefined(pageData.this_page)]]">
      <template is="dom-if" if="[[!_idIsDefined(routeData.matter_id)]]">
        <matter-list></matter-list>
      </template>
      <template is="dom-if" if="[[_idIsDefined(routeData.matter_id)]]">
        <matter-detail linkedmatterid="[[routeData.matter_id]]"></matter-detail>
      </template>
</template>

  </template>

  <script>
    class Matters extends Polymer.Element {
      static get is() { return 'my-matters'; }

      _subidIsDefined(subid) {

        if (subid) {

          return true;
        }

        return false;
      }

      _idIsDefined(id) {


        if (id) {
          return true;
        }

        return false;
      }

    }
    window.customElements.define(Matters.is, Matters);
  </script>

</dom-module>