Vue: Я надеюсь, что keep-alive может увеличить функцию динамического удаления кешированных компонентов

Фактически, прежде чем ответить на этот вопрос один раз на форуме, вы можете использовать keep-alive из include или exclude .

Чтобы написать вам простой пример:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

Разве это не дублирование №6259?

@posva Да, похожая ситуация. Он собирается динамически очистить кеш keep-alive во время выполнения.

@jkzing Большое спасибо, ваш метод должен быть в состоянии завершить сценарий, о котором я упоминал выше, но у меня все еще есть сценарий, например, страница со списком, если он переключается с вкладки, я надеюсь, что он остается живым, и получить данные непосредственно из памяти, если после изменения фрагмента данных программа переходит на страницу списка, надеясь получить новые данные в фоновом режиме. Хотя я могу получить новые данные из фона после завершения страницы, это кажется недостаточно элегантно. Если есть указанный выше api, мне нужно изменить его только после модификации. Keep-alive этого маршрутизатора очищается, и данные должны быть автоматически получены из фона. Не знаю, поможет ли вам понять сказанное мной. Короче говоря, я надеюсь, что смогу элегантно сделать одностраничное приложение таким же, как эффект нескольких вкладок в предыдущем iframe: http: //www.sucaihuo .com / modals / 16/1653 / demo / Выше, спасибо.

@okjesse Это также можно сделать, все, что вам нужно, это обновить include или exclude до компонентов более высокого уровня; или, если используется vuex, поместите include хранилище vuex .

Короче говоря, Vue предоставляет для этого базовый API.Если вы хотите использовать его удобно, вам нужно немного его инкапсулировать.

@jkzing поймите, спасибо, сейчас я сам пишу реализацию keep-alive, я постараюсь следовать вашему методу

@jkzing , но даже если это может быть достигнуто, я думаю, что лучше иметь этот api, семантика будет другой, я хочу очистить данные, которые были сохранены, сам компонент все еще жив, скорее чем нон-стоп Будет ли переключатель работать

Это лишь одна из проблем. Постоянное открытие новых страниц, с которыми мы сталкиваемся, приведет к слишком большому объему памяти, и, в конце концов, браузер зависнет. Это не должно иметь ничего общего с keepalive.Если мы сможем, воспроизвести это явление и показать его @jkzing.

Мы хотим решить, использовать ли кешированную страницу или новую страницу непосредственно перед переходом на страницу.Старый api не может этого сделать

Я также столкнулся с этим требованием. Затем я щелкнул список меню для подключения, добавил метку на вкладках и кэшировал вновь открытый компонент; щелкнул метку закрытия, я надеюсь удалить кешированный компонент; я вызвал это. $ In деактивированная функция перехвата компонента. destroy (); Это может очистить кеш, но обнаружено, что новый компонент не будет кэшироваться при открытии соединения в следующий раз

@fadexiii Я решил существующий метод, который может быть достигнут путем динамической настройки включает

@okjesse Мой keep-alive содержит <router-view></router-view> Метод include не работает

@okjesse Только что я не определил атрибут name для conponent. После определения все в порядке, спасибо

К вашему сведению: реализовано в 2cba6d4cb1db8273ee45cccb8e50ebd87191244e

@fadexiii # 6961 Те же потребности, что и вы, как вы их решаете?

@ Jack-93 Используйте keep-alive include, когда открывается новый тег, имя текущего компонента добавляется во включаемый массив, а имя компонента закрывающего тега удаляется из массива при закрытии тега.

Увидев метод $ destroy, я думаю, что это правильное использование, которое определяет, следует ли кэшировать компонент при выходе со страницы из-за различного поведения пользователя в компоненте.
(Например, компонент сообщения, этот компонент должен быть уничтожен после успешной отправки сообщения. Если он не отправлен, кеш должен быть сохранен, чтобы пользователь мог войти и продолжить в следующий раз.)
Однако после уничтожения повторный доступ к этому компоненту снова приведет к странным результатам, и компонент больше не может кэшироваться. Я думаю, что это ошибка.

@wanyaxing Я также столкнулся с аналогичной проблемой. Я использовал keep-alive для кэширования всех подкомпонентов. Страница списка A --- «Подробная страница B ---» Трехуровневая страница D. При движении вперед I Все открылось маршруты хранятся в sessionStorage. При возврате проверяется, находится ли следующий маршрут в sessionStorage. Если да, текущий экземпляр будет уничтожен.
В этом случае в первый раз проблем нет, и он может работать нормально. Через два или более раз B будет кэшироваться несколько раз. Каждый раз, когда он возвращается из D в B, будет сгенерирован новый B, и ранее кэшированный B все еще находится в памяти, как показано на рисунке:

Основной код выглядит следующим образом:

@ realfly08 Я пытался отправить PR для решения этой проблемы, но мне кажется, что это не удалось. Я не понял, как пройти автоматическую проверку кода vue. -https :

Раньше я также готовился к общесайтовому кешу, а затем столкнулся с логической ямой обновления кеша.
Теперь я отказался от всего кеша сайта, включил кеш только на ключевых страницах формы, а затем динамически оценил в коде, следует ли сохранять данные текущей страницы, что является временным пропуском этих проблем, но я все еще чувствую, что это логики недостаточно.

@wanyaxing Я также столкнулся с аналогичной проблемой. Логическая функция, которая должна быть реализована, - это страницы A-> B-> C 3. При возврате используется кеш, и он повторно отображается при повторном входе. В настоящее время каждая страница поддерживается , а затем я принимаю решение на странице B. Если нужно вернуться на предыдущую страницу (перейти -1), уничтожить текущий компонент в деактивированном и вызвать $ destroy. Когда вы снова войдете на страницу C по порядку, вернитесь на страницу B , вы можете видеть, что это воссозданная страница B, в то же время в кеше есть страница B

https://www.jianshu.com/p/cd1baf5b03b0
Я собрал это

@fadexiii keep-alive как использовать с router-view?

  <keep-alive :include="includes">
     <router-view></router-view>
  </keep-alive>

includes записывает имя в конфигурации маршрутизации: 'логин'

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }]
 })

Почему я назначаю включения пустой строке, и ее все еще можно кэшировать?Мое требование - вручную уничтожить кешированный маршрут

После уничтожения компонента кеш не очищается. Думаю, проблема здесь.
Человек, отвечающий за проект, рекомендует использовать для обработки такие атрибуты, как include. Я не думаю, что он напрямую уничтожается. Память можно улучшить.

@wanyaxing прочитайте отправленный вами PR, он должен быть действительным, или откройте API удаления кеша, верно?

@ leixu2txtek Я отказался от этого PR. Принудительно очистив кеш, я реализовал функцию динамического удаления скрытого компонента кеша.

В настоящее время я использую кеширование для всего сайта и реализую функцию удаления кеша на основе бизнес-логики путем перехвата события маршрутизации выхода страницы. Следующие фрагменты кода приведены для справки:

• Поместите router-view в keep-alive, и весь сайт будет использовать кеш по умолчанию.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Я выложил все страницы в маршруты. Например, meta.rank представляет уровень страницы, например 1,5> 2,5> 3,5 означает переход на второй уровень с первого уровня на третий уровень.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Поскольку все страницы кэшируются, основная идея - [Когда будет уничтожен кеш? ]. Мой дизайн таков: кеш текущей страницы будет сохранен при переключении на следующую страницу на том же уровне, и [кеш текущей страницы будет уничтожен при возврате на предыдущую страницу].
• Итак, в main.js я использовал метод Vue.mixin для перехвата события выхода из маршрута и реализовал функцию уничтожения кеша страницы в методе перехвата. Основной код выглядит следующим образом:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Резюме: Фактически, через компонент keepAlive верхнего уровня, в котором расположен компонент страницы, кеш-список в объекте подвергается жестким манипуляциям. . .

Простой и понятный, хотя и не очень элегантный, им легко пользоваться, ха-ха :)

Конечно, я все еще надеюсь, что официальная поддержка API выйдет лучше.

@wanyaxing Я контролирую кеширование страницы через маршрутизацию

Например, я / выполнил / и его дочерний маршрут / выполнен / диаграмма /. Я также использую метод mixin для взлома, чтобы уничтожить компоненты, которые не нужно кэшировать при выходе из маршрута. Я хочу выполнить маршрут из родительский элемент для подмножества.Родитель кэшируется, а другие условия уничтожаются, поэтому нам нужно только контролировать маршрутизацию, без добавления каких-либо атрибутов, я ленив;

// 支持页面保持
Vue.mixin({
  beforeRouteLeave(to, from, next) {

    if (!to.path.startsWith(from.path)) this.$destroy();

    next();

  }
});

Спасибо @wanyaxing , ваш код мне очень пригодился. Позвольте мне сослаться на

Выяснил, что кеш не уничтожен.Старайтесь общаться с @LinusBorg изо всех сил

@wanyaxing Я искал способ получить кеш, не знаком с основным кодом vue, ваш код более полезен, я прошел тест, очень хорошо, временно сделайте это, я надеюсь, что официальный может решить эту проблему, Я спросил, мало ли проверено много информации, и есть ли проблемы того или иного рода

Ха-ха.
Исходя из этого, @ leixu2txtek рекомендует вам подключаемый модуль в сочетании с https://github.com/wanyaxing/vue-router- , тогда эффект лучше.
Используйте vue-router-then, чтобы открыть подстраницу на текущей странице, и вы можете получить информацию или события подстраницы на текущей странице.
this.$routerThen.push('/chose').then(vm => {})

Чтобы привести наиболее часто используемый пример, например, при заполнении страницы заказа вам необходимо открыть список адресов для выбора.

<input v-model="price" v-model-link="'/select_address'" />

Затем в маршруте, открытом с помощью / select_address, после выбора адреса инициируйте событие ввода и вернитесь на страницу.

<script>
methods:{
    clickSomeOne:function(value){
        this.$emit('input',value);
        this.$router.go(-1);
    },
}
</script>

Это требует прямого взаимодействия между родительской и дочерней маршрутизацией на основе упомянутой выше стратегии кэширования. Однако это будет очень интересно после реализации. Идея разработки интуитивно понятна. Вам не нужно думать о хранении временных данных в vuex. , просто откройте страницу, чтобы получить данные.

@fadexiii Вы имеете в виду, что если вы используете маршрутизатор, следует ли включать имя в компонент, соответствующий маршрутизатору?
---- router.js ----

import ComponentA from 'views/a
export default [
  {path: 'a', component: ComponentA, name: a}
]

---- просмотров / a.vue ----

export default {
  name: 'xxxa'
}

Что следует хранить в include: ComponentA или a или xxxa?

@yiwuyu xxxa

@jkzing Что делать, если я загружаю один и тот же компонент дважды, один нужно кэшировать, а другой не нужно кэшировать? Их имена компонентов совпадают.

Я тоже столкнулся с этой проблемой. Добавить
meta: {
keepAlive: true // нужно кэшировать
}
Установите значение false при нажатии кнопки закрытия
Затем измените слушателя на true
Подробнее см. Https://mp.csdn.net/postedit/82628953 . Теперь с тестом проблем нет. Не знаю, возникнут ли проблемы позже.

Когда вкладка переключается, кеш закрывается, а кеш уничтожается, и в следующий раз, когда он открывается и перезагружается с несколькими вложенными страницами подмаршрутизации, то же самое верно.

Фактически, прежде чем ответить на этот вопрос один раз на форуме, вы можете использовать keep-alive из include или exclude .

Чтобы написать вам простой пример:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

Я понимаю этот пример. Я хочу спросить здесь богов. У меня такой бизнес. Левая сторона - это вертикальная вкладка. Эта вкладка может быть динамически добавлена ​​или удалена пользователем. Щелкните любую из вкладок, и справа отобразится вкладка, соответствующая на этой вкладке.Дерево фактически является тем же деревом, но узлы, выбранные деревом, различны. Первоначальная идея состоит в том, чтобы добавить элемент вкладки, добавить дерево с правой стороны, при переключении вкладок дерево будет скрыто и отображаться соответственно (v-show), но когда будет больше вкладок, будет много деревьев справа, а узлов dom слишком много.Если вам не нужно скрывать отображение и использовать v-if, будут состояния дерева (выбрано, развернуто, прокручено), которые не могут быть сохранены, поэтому я позже подумал keep-alive, который может спасти состояние. Но я являюсь однофайловым компонентом vue. Вкладки находятся на главной странице. Дерево - это компонент, который импортируется. После импорта он напрямую регистрируется в свойстве компонентов. Как я могу создать несколько имен для ёлку как ты выложил ??? Но на самом деле я всего лишь компонент. Я создал имя только для связи с левой вкладкой. Точнее, чтобы удалить элемент вкладки с левой стороны, также удалить буфер дерева, соответствующий этому элементу вкладки в keepalive? Но что нам делать?

@ leixu2txtek Я отказался от этого PR. Принудительно очистив кеш, я реализовал функцию динамического удаления скрытого компонента кеша.

В настоящее время я использую кеширование для всего сайта и реализую функцию удаления кеша на основе бизнес-логики путем перехвата события маршрутизации выхода страницы. Следующие фрагменты кода приведены для справки:

• Поместите router-view в keep-alive, и весь сайт будет использовать кеш по умолчанию.
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• Я выложил все страницы в маршруты. Например, meta.rank представляет уровень страницы, например 1,5> 2,5> 3,5 означает переход на второй уровень с первого уровня на третий уровень.

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• Поскольку все страницы кэшируются, основная идея - [Когда будет уничтожен кеш? ]. Мой дизайн таков: кеш текущей страницы будет сохранен при переключении на следующую страницу на том же уровне, и [кеш текущей страницы будет уничтожен при возврате на предыдущую страницу].
• Итак, в main.js я использовал метод Vue.mixin для перехвата события выхода из маршрута и реализовал функцию уничтожения кеша страницы в методе перехвата. Основной код выглядит следующим образом:

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

Резюме: Фактически, через компонент keepAlive верхнего уровня, в котором расположен компонент страницы, кеш-список в объекте подвергается жестким манипуляциям. . .

Простой и понятный, хотя и не очень элегантный, им легко пользоваться, ха-ха :)

Конечно, я все еще надеюсь, что официальная поддержка API выйдет лучше.

Но таким образом память не будет освобождена. Я отключаю поддержку активности, и все будет в порядке. Добавление поддержки активности, а затем ручное удаление кеша и уничтожение памяти все еще растет. Интересно, обратили ли вы внимание на этот аспект?

@Liudapeng Раньше я

В последнее время я немного занят. Я видел ваше сообщение два дня назад и не успел вам ответить.

Я только что провел еще один тест, повторенный несколько раз, чтобы углубиться в пять или шесть уровней страницы, а затем вернуться на домашнюю страницу. Результаты временной шкалы памяти следующие:

• Включите keep-alive и динамически уничтожьте компонент (то есть используйте метод, который я упомянул выше):
  > Вы можете отчетливо увидеть падение памяти на временной шкале Я думаю, что память уничтожена.
  

Не используйте keep-alive:

Поскольку поддержки активности нет, стек памяти будет не очень быстрым, но он все равно становится все выше и выше (возможно, мой код меняется в спешке, и в других местах есть утечки памяти)

Но в целом я думаю, что после использования динамического уничтожения использование памяти все еще находится в допустимом диапазоне, поэтому, если вы испытываете значительное увеличение памяти, вы должны проверить, не уничтожается ли событие привязки при уничтожении компонента (вызывая Хотя компонент удаляется из массива кеша keepAlive, он не уничтожается из памяти).

Пожалуйста, проверьте снова.

@wanyaxing у меня такая же проблема в моем проекте ， без keep-alive ：

Вызов $ destory () динамического компонента не работает, и я обнаружил, что кучи JS увеличивается с количеством узлов. Похоже, что динамический компонент создал DOM, не разрушая их.

@bigggge имя - это атрибут внутри компонента, а не атрибут маршрута

Мой вопрос еще более странный. Моя версия vue - 2.3.3. На странице A есть код для прокрутки для загрузки следующей страницы. Я переключился со страницы A на страницу B. Когда страница B была прокручена, я обнаружил, что код страницы A для загрузки следующей страницы будет все еще будет казнен. Когда я удалю глобальную проверку активности, вышеуказанная проблема не возникнет. Но все мои активированные снова недействительны, я должен использовать created.

Мой вопрос еще более странный. Моя версия vue - 2.3.3. На странице A есть код для прокрутки для загрузки следующей страницы. Я переключился со страницы A на страницу B. Когда страница B была прокручена, я обнаружил, что код страницы A для загрузки следующей страницы будет все еще будет казнен. Когда я удалю глобальную проверку активности, вышеуказанная проблема не возникнет. Но все мои активированные снова недействительны, я должен использовать created.

Это может быть вызвано глобальным мониторингом, вы можете определить, является ли это текущий маршрут при прокрутке, а затем решить, загружать ли следующую страницу

Мой вопрос еще более странный. Моя версия vue - 2.3.3. На странице A есть код для прокрутки для загрузки следующей страницы. Я переключился со страницы A на страницу B. Когда страница B была прокручена, я обнаружил, что код страницы A для загрузки следующей страницы будет все еще будет казнен. Когда я удалю глобальную проверку активности, вышеуказанная проблема не возникнет. Но все мои активированные снова недействительны, я должен использовать created.

Это может быть вызвано глобальным мониторингом, вы можете определить, является ли это текущий маршрут при прокрутке, а затем решить, загружать ли следующую страницу

Да, я использую плагин vue-infinite-scroll. Когда я использую глобальный keep-alive, он не удаляет событие мониторинга. Я переписал этот плагин.

Я использовал сценарий @wanyaxing для достижения функции очистки кеша, и с очередью переходов записи легче справиться с требованием отката, а не обновления.Сценарий организован и раскрывает суть
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing Что делать, если я загружаю один и тот же компонент дважды, один нужно кэшировать, а другой не нужно кэшировать? Их имена компонентов совпадают.

У меня тоже есть этот вопрос. Include не может удовлетворить это требование. Если одному компоненту соответствует несколько страниц маршрутизации, то имя компонента только одно. Что мне делать?

Когда вкладка переключается, кеш закрывается, а кеш уничтожается, и в следующий раз, когда он открывается и перезагружается с несколькими вложенными страницами подмаршрутизации, то же самое верно.

@ heng1234 Здравствуйте, вы решили эту проблему? Кто может оставить контактную информацию для руководства?

Не переключайте страницы маршрутизацией и не переключайтесь по компонентам
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

От: Codezero123
Время отправки: 2019-12-03 10:04
Получатель: vuejs / vue
Копия: hlvy; Упоминание
Тема: Re: [vuejs / vue] Я надеюсь, что keep-alive может увеличить функцию динамического удаления кэшированных компонентов (# 6509)
Когда вкладка переключается, кеш закрывается, а кеш уничтожается, и в следующий раз, когда он открывается и перезагружается с несколькими вложенными страницами подмаршрутизации, то же самое верно.
@ heng1234 Здравствуйте, вы решили эту проблему?
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub или откажитесь от подписки.

@wanyaxing вы не эффективны для трехуровневого кеша маршрутизации. Например, в vue-element-admin, когда включены несколько трехуровневых тегов тегов, переключение тега тега не приведет к уничтожению компонента кеша, а только к открытию одной трети -уровень тега маршрутизации тег., может быть уничтожен. Например, включите следующие меню1-0 и меню1-1.
маршрутизация.
{ path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Routes', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu 1' }, redirect: '/nested/menu1/menu1-1', children: [ { path: 'menu1-0', component: () => import('@/views/nested/menu1/menu1-0'), name: 'Menu1-0', meta: { title: 'Menu 1-0', noCache: true } }, { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu 1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', redirect: '/nested/menu1/menu1-2/menu1-2-1', meta: { title: 'Menu 1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu 1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu 1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu 1-3' } } ] } ] }

`Vue.mixin ({
beforeR outeLeave: function (to, from, next) {
if (from.meta.noCache) {
if (this. $ vnode && this. $ vnode.data.keepAlive) {
if (this. $ vnode.parent && this. $ vnode.parent.componentInstance && this. $ vnode.parent.componentInstance.cache) {

      if (this.$vnode.componentOptions) {
        var key = this.$vnode.key == null
          ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
          : this.$vnode.key;
        var cache = this.$vnode.parent.componentInstance.cache;
        var keys = this.$vnode.parent.componentInstance.keys;
        if (cache[key]) {
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          delete cache[key];
        }
      }
    }
    this.$destroy();
  }
}
next();

},
}); `

Идея такого рода. С идеей нет проблем. Когда вызывать и уничтожать кеш, это зависит от конкретной реализации в вашем бизнесе.

Такой сценарий с нашей деловой стороны должен быть очень сценарием:
1. Я просмотрел несколько страниц, и их нужно сохранить в кеше.
2. Нажмите для выхода, вам нужно очистить весь кеш
3. После входа в систему появляются другие сообщения об ошибках перенаправления, эти страницы не кэшируются.
4. Вход в систему прошел успешно, и новая страница продолжает кэшироваться.

Теперь я обнаружил, что невозможно очистить все кеши, когда он достиг 2. Установка максимального значения keep-alive в vuex и установка его на 1 по-прежнему недействительна, в зависимости от инструментов разработчика vue, все еще есть кешированные страницы.
Что для меня еще более странно, так это то, что переход к другим страницам без входа в систему в 3 вызовет монтирование кэшированной страницы в 1, и, глядя на инструменты разработчика, все эти страницы неактивны. Эй, это приводит к другой логике страницы. проблемы.
Я долго искал, но до сих пор не знаю, почему

Такой сценарий с нашей деловой стороны должен быть очень сценарием:
1. Я просмотрел несколько страниц, и их нужно сохранить в кеше.
2. Нажмите для выхода, вам нужно очистить весь кеш
3. После входа в систему появляются другие сообщения об ошибках перенаправления, эти страницы не кэшируются.
4. Вход в систему прошел успешно, и новая страница продолжает кэшироваться.

Теперь я обнаружил, что невозможно очистить все кеши, когда он достиг 2. Установка максимального значения keep-alive в vuex и установка его на 1 по-прежнему недействительна, в зависимости от инструментов разработчика vue, все еще есть кешированные страницы.
Что для меня еще более странно, так это то, что переход к другим страницам без входа в систему в 3 вызовет монтирование кэшированной страницы в 1, и, глядя на инструменты разработчика, все эти страницы неактивны. Эй, это приводит к другой логике страницы. проблемы.
Я долго искал, но до сих пор не знаю, почему

В вашем сценарии при времени 2 вам следует подумать об обновлении страницы напрямую, что является самым безопасным и прямым решением.

Поскольку include соответствует имени компонента, что, если несколько маршрутов соответствуют одному компоненту? Есть ли способ дать одному и тому же компоненту другое имя?