vue-routerЭто официальный менеджер маршрутизации Vue с простым использованием и мощными функциями. Но в мобильных сценариях, особенно в гибридных проектах, мы столкнулись с некоторыми проблемами при использовании.
Дилемма использования vue-router
Давайте сначала разберемся с обычными функциями диспетчера маршрутизации на стороне клиента, вы можете открыть приложение настроек телефона, чтобы испытать:
- Большинство страниц имеют концепцию стека, например: Страница А -> Страница Б. В настоящее время существуют экземпляры и страницы А, и страницы Б, но отображается страница Б. Когда мы возвращаем страницу А из страницы Б, страница Б уничтожается и отображается страница А;
- Может быть несколько экземпляров одной и той же страницы, например: Страница А -> Страница А -> Страница А, если продукт А переходит к продукту Б, это фактически страница продукта. В это время будет несколько экземпляров одной и той же страницы. ;
- Большинство страниц поддерживают возврат жестами, например, смахиванием влево для возврата.
Таким образом, в продуктах, ориентированных на мобильные устройства, рабочие привычки пользователей и концепции дизайна продуктов в основном аналогичны вышеуказанным пунктам. Но если мы посмотрим на эти моменты с точки зрения vue-router, то обнаружим такие вопросы:
- Все зарегистрированные маршруты в vue-router являются синглтонами.Когда страница A переходит на страницу A, новая страница A не генерируется, а текущая страница A перерисовывается. Когда требуются два PageA, и оба PageA должны иметь свои собственные разные состояния, решить этот сценарий с помощью vue-router будет сложнее.
- vue-router следует спецификациям Интернета. Путь всего маршрута линейный. Выживание экземпляра компонента не имеет ничего общего с маршрутом, но зависит от того, используется он или нет.
keep-aliveкомпоненты. На мобильной стороне в большинстве сценариев маршрутизации стека PageA переходит к PageB, и активны экземпляры A и B. Когда PageB возвращается к PageA, A выживает, а B уничтожается. Очевидно, что vue-router не может соответствовать этому сценарию. - Маршрутизация vue-router может быть только от A к B. Промежуточного состояния нет. Мы не можем восстановить исходную функцию возврата свайпом влево на основе vue-router.
Поэтому мы начали искать решения в сообществе, но, к сожалению, большинство из них основано наvue-routerВторичная разработка , и она не соответствует требованиям и имеет некоторые баги. Поэтому мы разработали его на основе концепции стека и разработали для мобильных приложений.vue-stack-router.
vue-stack-router
Поставьте рендеринг на первое место и скользящий возврат на его основе.
В сравнении сvue-router,vue-stack-routerИмеет следующие характеристики:
- Управление маршрутизацией на основе стека
- передача данных между маршрутами
- Мелкозернистые, настраиваемые эффекты перехода маршрутизации
- Идеальный и независимый навигационный хук маршрутизации, не нужно иметь дело с логикой повторного использования компонентов (vue-router's
beforeRouteUpdate) - Поддержка режима предварительного рендеринга
Конкретные документы см.vue-stack-router, В сравнении сvue-router,vue-stack-routerФункции библиотеки еще не совершенны и не сильны в некоторых аспектах, и я надеюсь, что заинтересованные студенты смогут вместе улучшать эту библиотеку. укажите адрес гитхабаGitHub.com/logiclab/vu…, добро пожаловать пр/вопросы/звезда.
В последующих статьях будет проанализирован весьvue-stack-routerПроцесс проектирования и реализации, приглашаем всех обратить внимание.