Полимерная глубокая 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 слой (как стартовый комплект).
Каковы некоторые лучшие практики для маршрутизации?