0

我在应用程序路由方面遇到问题（主要是因为我不明白）。我遇到的具体问题是更改 url/route。我正在使用iron-selectoron anapp-drawer来更改iron-page视图。视图正在切换，但 url 没有更新。另一个问题是，在我的一个观点中，我需要切换到详细视图（想想 /events -> /event/:id）。我不确定在视图中更改视图的正确方法。

说够了 - 让我们看一些代码

应用程序的结构如下：

/login

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

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

my-app有一个 Iron-pages 元素，用于保存login-page、admin-portal和. 的视图user-portal。admin-portal并且user-portal每个都有iron-pages,view1等view2。

用户门户

<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 在这个视图中，我有iron-list一个按钮，需要带我去，user-clinic-view但我将路线更改为类似/event/:id

我努力了<a href="/user/event/:id"></a>

我也试过

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

这似乎是一个非常基本的 Web 应用程序，但 Polymer 中的路由非常混乱，并且没有深度路由的示例。我见过的每个示例都只有 1 层深（例如入门套件）。

路由的一些最佳实践是什么？

4

0 回答 0