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

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

0 голосов
/ 06 сентября 2018

У меня проблемы с 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>

пользователь-клиника-лист вид В этом представлении у меня есть 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 слой (как стартовый комплект).

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

...