Полимерная глубокая app-маршрутизация без изменения URL

У меня проблемы с app-route (в основном из-за того, что я этого не понимаю). Конкретная проблема, с которой я сталкиваюсь - это изменение URL / маршрута. Я использую iron-selector на app-drawer изменить iron-page Посмотреть. Вид переключается, но URL не обновляется. Другая проблема заключается в том, что в одном из моих представлений мне нужно переключиться в представление подробностей (думаю / события -> / событие /: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'));

Это похоже на очень простое веб-приложение, и все же маршрутизация в Polymer настолько запутанная, что нет примеров глубокой маршрутизации. Каждый пример, который я видел, имеет глубину всего 1 слой (как стартовый комплект).

Каковы некоторые лучшие практики для маршрутизации?

0 ответов

Другие вопросы по тегам