我在下面附加了我的代码，希望可以添加上下文。
当点击浏览器的“后退”按钮或进入详细信息页面后导航至列表时，它不能正确地“刷新”。
EG-我正在按此路径浏览。 网址/事项-从列表中选择一个问题 url / matter / 6719-查看详细信息，并可以选择查看与其链接的参与方列表。 url / matter / 6719 / matparties-关联方列表
如果我现在通过菜单或后退按钮（不刷新页面）导航到url /问题，似乎没有在应用程序路由中重新加载该路由以查看它不再是ID，我进入了我之前点击的问题的详细信息页面。
我已经阅读了API文档，当我进入每个页面时，我觉得应该以某种方式重新加载app-route元素，但是我找不到方法？
添加一些上下文的场景-
我正在使用应用程序路由构建Polymer 2应用程序，在这里我获得了一些使用方法方面的帮助。
我已经达到了期望的结果，但是我有一种不正确的方式。
我希望能够击中 网址/事项-命中清单 url / matters / 6719-点击有关一件事的详细信息 url / matters / 6719 / matparties-返回与该事件相关的各方的列表 url / parties-所有参与者的列表。 url / parties / 123-参加者详细信息（从matParties或参加者中单击）
这是通过my-matter页面中的一组Dom-if语句实现的。 （这是我不确定是否使用了最佳实践的方法）
我将路线从my-app页面传递到问题页面，如下所示。
<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>