1. Спрос
При разработке проекта передняя часть неизбежно столкнется с необходимостью кэширования маршрутизации. в предыдущемReactВ проекте, перепробовав различные материалы и плагины, я узнал, чтоReactСотрудничатьReact-routerЕсть много неожиданных проблем в кеше маршрутизации. так вReactВ проекте мы избегаем получения запросов, требующих кэширования маршрута.
В последнее время разрабатываетсяvueпроект, из-заvueизначальноKeep-aliveкомпоненты иinclude,excludeвидыapiдля реализации кэширования маршрута. Поэтому мы решили смело браться за эту яму.
2. Наступить на яму
Сначала мы также напрямую использовалиkeep-aliveзаворачиватьrouter-viewс маршрутизациейfullPathтак какrouter-viewизkeyзначение, затем используйтеincludeОпределите компоненты, которые необходимо кэшировать.
а также в роутинге пользовательскихmetaвнутри определенияkeepaliveТребуется ли поле кэша для обработки кэширования
Для общих проектов, по сути, достаточно решить кеш таким образом. Но мы являемся системой управления, соответствующей стороне B, там будет страница меню, вкладка, и маршрут может нуждаться в кэшировании или не кэшировании в разных ситуациях. динамически меняющийсяkeepaliveListили$route.meta.keepaliveПосле этого уничтожение и повторное кэширование кэша компонентов не срабатывает. Таким образом, мы можем только изменить метод достижения.
3. Решение - очистить кэш страницы деталей
В нашем проекте будет несколько вкладок, похожих наelement-uiКомпонент вкладок.
Наши маршруты на той же вкладке настроены с одинаковымиpageKeyПредставляет компонент маршрутизации на вкладке.
В соответствии с приведенной выше конфигурацией компоненты A и B находятся на одной вкладке, а C — на другой вкладке.
С использованиемkeep-aliveзаворачиватьrouter-viewПосле этого можно переключаться между разными вкладками, переключать маршруты и страницы кеша, но переходить из списка на страницу сведений на той же вкладке.Нам нужно очищать кеш и повторно запрашивать данные каждый раз, когда открывается страница сведений. вошел. Между этими двумя компонентами, которые требуют различных эффектов кэширования, мы добавляем еще один в определение маршрута.noCacheПоле определяет маршрут этого поля, указывая, что при переключении между разными маршрутами pageKey (представляющими разные вкладки) требуется кеширование, а при переключении между маршрутами с одним и тем же pageKey (представляющим одну и ту же вкладку) кэширование и очистка не требуются.
После запроса данных я узнал, что vue хранит компонент кеша в$vnode.parent.componentInstance.cacheВ статье мы придумали способ использовать хук маршрутизации vue для очистки кеша.
Вышеприведенный код - это первый раз, когда вы открываете страницу сведений и возвращаетесь на страницу списка, введитеbeforeRouteLeaveфункция ловушки, вызовclearCacheМетод очищает кеш страницы сведений.
4. Решение. Закройте вкладку, чтобы очистить кеш.
Также есть проблема, что теперь у каждой вкладки есть кнопка закрытия, после нажатия кнопки закрытия вкладки эта же вкладка должна быть очищена.pageKeyВсе компоненты кэшируются. Здесь мы устанавливаем его в случае нажатия кнопки закрытияvuexглобальные переменные являются глобальнымиbeforeRouteLeaveДобавьте это суждение к суждению , если глобальная переменная изменяется, нажимается кнопка закрытия, а затемclearCacheто же, что и метод очистки внутриpageKeys компонентcacheсписок.
5. Решение. Вернитесь к условиям запроса кеша списка и перепроверьте данные.
На самом деле, большинство проблем с кэшированием здесь решено, но наш любимый продуктовый папа неожиданно выдвинул для нас новое требование: когда страница сведений переходит на страницу списка, должны существовать условия запроса страницы списка, и это необходимо повторить Проверьте запрос. Вначале мы решили рассмотреть новое решение по очистке кеша страницы списка и сохранению условий запроса страницы списка. Поскольку наша страница со списком не будет установленаnoCacheполе, поэтому условный кеш списка запросов существует, нам нужно только один раз перенастроить интерфейс запроса.
Согласно этой идее, мы даем страницу сведений, когда страница сведений возвращается на страницу списка.metaДобавить объектbackSearchполе, вbeforeRouteLeaveесли поймаютfrom.meta.backSearch, удалите это свойство и установитеto.meta.backSearch=true, а затем установите глобальныйactivedкеш-хук, если он обнаруживает маршрутmeta.backSearchполе, определяемое компонентомmyOptionМетод на самом деле является методом запроса компонента
6. Решение: URL-адрес со случайным числом для очистки кеша
Вышеупомянутое, вероятно, решает все требования к кэшированию бизнеса. Однако в недавней разработке вылез очередной баг в кеше из-за грубой работы пользователя.
Условие срабатывания для очистки кеша страницы сведений такое же.pageKeyНапример, страница сведений переходит обратно на страницу списка, но одна из операций пользователя состоит в том, чтобы войти на страницу сведений и напрямую щелкнуть меню, чтобы перейти на другие страницы, а затем щелкнуть меню списка, чтобы повторно войти на страницу списка, и маршруты все разные.pageKeyВ случае перехода логика кэширования страницы сведений не срабатывает.
замечая нашrouter-view keyполе$route.fullPath, поэтому мы решили датьurlДобавьте случайные числа, чтобы решить эту проблему.
7. Заключение
В настоящее время я не нашел относительно признанного решения для кэширования в отрасли, и мы также изучаем его. Наш метод может быть громоздким, но на данный момент он может решить наши потребности в разработке.Если есть большие ребята, которые могут дать нам ценный совет, мы будем очень благодарны.