Коллеги, накопилась информация, которой нет в едином виде ни в документации, ни на форуме касательно роутера. Не для новичков, а для тех, кто хочет глубже понять как устроен роутинг в F7. Не буду спамить ссылками, поэтому выкладываю здесь. Очень рад фидбеку и указанием на ошибки.
SwipeBack
По умолчанию Framework7 всегда держит в DOM предыдущую страницу, если она есть, конечно. Состояние этой предыдущей страницы полностью сохраняется.
При навигации “назад” каждый раз загружается предыдущая страница. Допустим, у нас есть переходы:
page1 > page2 > page3
Если, находясь на page3, мы нажимаем “назад”, то перед тем, как показать page2, которая у нас уже есть в DOM, мы загружаем страницу page1 и кладем ее в DOM. Когда мы уже на page2, то действие “назад” ничего не загружает и сразу показывает page1.
На такое поведение влияют две опции: SwipeBack (для каждой темы - свой параметр) и preloadPreviousPage.
Загрузка предыдущей страницы с помещением ее в DOM будет работать когда включено preloadPreviousPage или когда включен SwipeBack.
Сам SwipeBack (жест слева направо) полноценно будет работать всегда, когда включена сама опция SwipeBack, а preloadPreviousPage в этом случае может принимать любое значение.
Особенность ios и Navbar
В ios-теме Navbar, при навигации на страницу (или другую сущность), удаляется из текущего места и поднимается вверх на уровень View. Поэтому всегда при обращении к Navbar используйте метод app.navbar.getElByPage(pageEl), где pageEl, например, для текущей страницы можно получить так: app.views.current.router.currentPageEl
stackPages в View
В View можно установить параметр stackPages=true (по умолчанию он выключен), который сделает возможным сохранять предыдущие страницы в DOM вместе с их состоянием.
Сохранение работает только “назад”, но можно сделать и “вперед”, об этом в следующем разделе.
Пример того, когда состояние сохранится: page1 > page2 (что-то сделали) > page3 > (вернулись) page2 (состояние сохранилось).
Пример того, когда состояния не сохранилось: page1 > page2 > page3 (что-то сделали) > (вернулись) page2 > page3 (состояние не сохранилось).
В большинстве случаев, если нам нужен такой функционал, мы просто включаем эту опцию в любой момент и получаем сохранение состояния.
Данные при stackPages=true хранятся в DOM, учитывайте это обязательно.
Пара слов о роутере
Роутер устроен так, что данные он получает только один раз и не важно, каким откуда именно пришли данные, кроме динамического контента, т.к. content. Например, компонент роутера будет загружен только один раз.
el и PageName
Есть много вариантов, откуда брать контент в конкретном маршруте, но тут не все так просто.
Для полноценной и правильной работы el и pageName:
- Это может быть только страница, т.е.
<div class="page"></div>
- У текущего View параметр stackPages должен быть включен.
- Элемент должен быть в текущем View, а не где-то за его пределами в DOM.
- У элемента должен быть класс stacked, т.е. так
<div class="page stacked"></div>
В этом случае сохранение работает и вперед и назад. Но, если мы что-то не сделаем, то результат может быть не таким, как ожидается.
el
Роутер ищет этот элемент в любом месте DOM, извлекает его оттуда и делает его текущей страницей.
pageName
Роутер ищет <div class="page" data-name="{{pageName}}"></div>
только в текущем View. Он извлекает элемент из DOM навсегда и делает его текущей страницей.
KeepAlive
Любой маршрут из списка routes может иметь опцию keepAlive : true. В этом случае то, что загрузилось по этому маршруту закешируется раз и навсегда. Кеширование не зависит от параметров маршрута, а также привязывается именно к маршруту, а не ко View, ведь можно открыть один и то же маршрут в разных View.
Если вы хотите иметь два разных закешированных значения одного маршрута, то нужно создать два View, в каждом из которых будет этот маршрут. Например, каждый маршрут будет открыт со своими параметрами.
Кеширование работает при навигации и вперед и назад. Кешируемые данные не сохраняются в DOM, а находятся в переменной, которая отвечает за данный маршрут. Средств для очистки кеша нет.
KeepAlive работает только со страницами, т.е. с <div class="page"></div>