Vue: 연결 유지가 캐시된 구성 요소를 동적으로 삭제하는 기능을 향상시킬 수 있기를 바랍니다.

사실, 포럼에서 이 질문에 한 번 대답하기 전에 keep-alive of include 또는 exclude 를 사용하여 할 수 있습니다.

간단한 예를 작성하려면:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

이것은 #6259의 복제가 아닙니까?

@posva 네, 비슷한 상황입니다. 런타임 중에 keep-alive 캐시를 동적으로 지우려고 합니다.

@jkzing 대단히 감사합니다. 귀하의 방법은 위에서 언급한 시나리오를 완료할 수 있어야 하지만 목록 페이지와 같은 시나리오가 아직 탭에서 전환되면 연결 유지가 되기를 바랍니다. 메모리에서 직접 데이터를 수정한 후 백그라운드에서 새 데이터를 얻으려고 프로그램이 목록 페이지로 점프하면 페이지가 완료된 후 백그라운드에서 새 데이터를 얻을 수 있지만 느낌 충분히 우아하지 않습니다.위의 API가 있으면 수정한 후에만 변경하면 됩니다.이 라우터의 연결 유지가 지워지고 백그라운드에서 데이터를 자동으로 가져와야 합니다. 제가 말씀드린 내용이 이해가 되실런지 모르겠습니다. 요컨대, 이전 iframe의 멀티탭 효과와 같은 단일 페이지 응용 프로그램을 우아하게 만들 수 있기를 바랍니다.

@okjesse 이 작업도 수행할 수 있습니다. include 또는 exclude 를 상위 구성 요소로 업그레이드하거나 vuex를 사용하는 경우 vuex 스토어에 include 하면 됩니다. .

간단히 말해서 Vue는 이를 위해 기본적인 API를 제공하는데, 편리하게 사용하려면 약간 캡슐화해야 합니다.

@jkzing 이해, 감사합니다. 이제 혼자 연결 유지 구현을 작성하고 있습니다. 귀하의 방법을 따르려고 노력할 것입니다.

@jkzing , 하지만 이것이 가능하더라도 이 api를 갖는 것이 더 낫다고 생각합니다. 의미가 다를 것입니다. 내가 원하는 것은 유지된 데이터를 지우고 구성 요소 자체가 여전히 살아 있는 것입니다. 스위치가 살아있는지 여부

이것은 문제 중 하나입니다. 새로운 페이지를 계속 열면 너무 많은 메모리가 발생하고 결국 브라우저가 정지됩니다. Keepalive와 관련이 없어야 합니다.가능하다면 현상을 재현하여 @jkzing에게 보여줄 수 있습니다.

우리가 달성하고자 하는 것은 페이지로 점프하기 직전에 캐시된 페이지를 사용할지 아니면 새 페이지를 사용할지를 결정하는 것입니다.오래된 API는 할 수 없습니다

나는 또한 이 요구 사항에 직면했습니다.그런 다음 연결하기 위해 메뉴 목록을 클릭하고 탭에 레이블을 추가하고 새로 열린 구성 요소를 캐시했습니다. 닫기 레이블을 클릭하면 캐시된 구성 요소를 삭제하고 싶습니다. 구성 요소의 비활성화된 후크 기능 destroy(); 이것은 캐시를 지울 수 있지만 다음에 연결이 열릴 때 새 구성 요소가 캐시되지 않는 것으로 나타났습니다.

@fadexiii 동적으로 설정하여 달성할 수 있는 기존 방법을 해결했습니다.

@okjesse 내 연결 유지에는 <router-view></router-view> 포함되어 있습니다.

@okjesse 방금 conponent의 name 속성을 정의하지 않았습니다. 정의 후에는 괜찮습니다. 감사합니다.

참고: 2cba6d4cb1db8273ee45cccb8e50ebd87191244e에서 구현됨

@fadexiii #6961 당신과 같은 요구 사항을 어떻게 해결합니까?

@Jack-93 keep-alive 포함을 사용합니다. 새 태그가 열리면 현재 구성 요소 이름이 포함 배열에 추가되고 태그가 닫힐 때 닫는 태그의 구성 요소 이름이 배열에서 삭제됩니다.

$destroy 메소드를 보니 컴포넌트의 다양한 사용자 동작을 통해 페이지를 떠날 때 컴포넌트를 캐시할지 여부를 결정하는 올바른 사용법이라고 생각합니다.
(예를 들어, 메시지 구성 요소, 이 구성 요소는 메시지가 성공적으로 제출된 후 삭제되어야 합니다. 제출되지 않은 경우 사용자가 다음에 계속해서 올 수 있도록 캐시를 보관해야 합니다.)
그러나 파괴 후 이 구성 요소에 다시 액세스를 반복하면 이상한 결과가 발생하고 구성 요소를 더 이상 캐시할 수 없습니다. 이것은 버그라고 생각합니다.

@wanyaxing 나도 당신과 비슷한 문제가 발생했습니다. 연결 유지를 사용하여 모든 하위 구성 요소를 캐시했습니다. 목록 페이지 A---"세부 정보 페이지 B---" 3단계 페이지 D. 앞으로 이동할 때 I All Opened 경로는 sessionStorage에 저장되며, 돌아올 때 다음 경로가 sessionStorage에 있는지 판단하여 현재 인스턴스를 파기합니다.
이 경우 처음에는 문제가 없고 정상적으로 실행될 수 있으며, 2회 이상 이후에는 B가 여러 번 캐싱되며 D에서 B로 돌아올 때마다 새로운 B가 생성되고, 이전에 캐시된 B는 그림과 같이 여전히 메모리에 있습니다.

핵심 코드는 다음과 같습니다.

@realfly08 이 문제를 해결하기 위해 PR을 제출하려고 했으나 제출에 실패한 것 같습니다 -https :

저도 이전에 사이트 전체 캐시를 준비하다가 논리적인 캐시 업데이트를 발견했습니다.
이제 전체 사이트 캐시를 포기하고 키 양식 페이지의 캐시만 켜고 현재 페이지 데이터를 유지할지 여부를 코드에서 동적으로 판단합니다. 이는 이러한 문제를 일시적으로 건너뛰지만 여전히 논리가 부족합니다.

@wanyaxing 저도 비슷한 문제가 발생했습니다. 구현해야 할 논리 함수는 A->B->C 3 페이지입니다. 캐시를 반환할 때 사용하고 다시 입력할 때 다시 렌더링합니다. 현재 각 페이지는 활성 상태로 유지됩니다. , 그리고 나는 페이지 B에서 판단한다. 이전 페이지로 돌아가려면(go -1), 비활성화된 상태에서 현재 컴포넌트를 파괴하고 $destroy를 호출한다. 다시 페이지 C에 순서대로 들어가면 페이지 B로 돌아간다. , B 페이지가 다시 생성 된 것을 볼 수 있으며 동시에 캐시에 B 페이지가 있습니다.

https://www.jianshu.com/p/cd1baf5b03b0
나는 이것을 컴파일했다

@fadexiii 연결 유지 라우터 보기와 함께 사용하는 방법은 무엇입니까?

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

포함은 라우팅 구성에 이름을 씁니다. '로그인'

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

빈 문자열에 포함을 할당했는데 여전히 캐시될 수 있는 이유는 무엇입니까?내 요구 사항은 캐시 된 경로를 수동으로 파괴하는 것입니다.

컴포넌트가 파괴된 후 캐시가 비워지지 않는데 문제가 여기에 있다고 생각합니다.
프로젝트 담당자가 처리를 위해 include와 같은 속성을 사용하는 것을 권장합니다. 직접적으로 파괴되지는 않습니다. 기억력을 향상시킬 수 있습니다.

@wanyaxing 은 제출한 PR을 읽었습니다. 유효해야 합니까, 아니면 캐시 제거 API를 열어야 합니까?

@leixu2txtek 그 PR을 포기하고 강제로 캐시를 지워서 가장 동적으로 캐시 구성요소를 삭제하는 기능을 구현했습니다.

현재 사이트 전체에서 캐싱을 사용하고 있으며, 페이지 이탈의 라우팅 이벤트를 가로채서 비즈니스 로직에 따라 캐시를 삭제하는 기능을 구현하고 있습니다.다음 코드 스니펫은 참고용입니다.

• 라우터 보기를 연결 유지에 넣으면 전체 사이트가 기본적으로 캐시를 사용합니다.
  <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 라우팅을 통해 페이지 캐싱을 제어합니다.

예를 들어, 나는 /executed/와 그의 자식 라우트 /executed/chart/를 가지고 있습니다. 또한 루트가 떠날 때 캐시할 필요가 없는 구성 요소를 파괴하기 위해 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-then 과 결합된 플러그인을 권장하며 효과가 더 좋습니다.
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 라우터를 사용하는 경우 라우터에 해당하는 구성 요소에 이름을 포함해야 한다는 뜻인가요?
---- 라우터.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 같은 컴포넌트를 두 번 불러올 때 하나는 캐싱하고 다른 하나는 캐싱할 ​​필요가 없는 경우 컴포넌트 이름이 동일합니다.

또한이 문제가 발생했습니다. 추가
메타: {
keepAlive: true // 캐시해야 함
}
닫기를 클릭하면 false로 설정
그런 다음 리스너를 true로 변경하십시오.
자세한 내용은 https://mp.csdn.net/postedit/82628953을 참고

탭이 전환되면 캐시가 닫히고 캐시가 파괴되며 다음 번에 여러 개의 중첩된 하위 라우팅 페이지를 열고 다시 로드할 때도 마찬가지입니다.

사실, 포럼에서 이 질문에 한 번 대답하기 전에 keep-alive of include 또는 exclude 를 사용하여 할 수 있습니다.

간단한 예를 작성하려면:
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

이 예를 이해합니다. 여기에서 신들에게 묻고 싶습니다. 제 사업은 이러합니다. 왼쪽은 세로 탭입니다. 이 탭은 사용자가 동적으로 추가하거나 삭제할 수 있습니다. 탭 중 하나를 클릭하면 오른쪽에 해당하는 탭이 표시됩니다. 트리는 실제로 같은 트리이지만 트리에서 선택한 노드가 다릅니다. 초기 아이디어는 탭 항목을 추가하고 오른쪽에 트리를 추가하는 것입니다. 탭을 전환할 때 트리가 숨겨지고 그에 따라 표시되지만(v-show), 더 많은 탭이 있을 때 많은 트리가 있을 것입니다. 오른쪽에 있고 dom 노드가 너무 많습니다. 디스플레이를 숨길 필요가 없고 v-if를 사용하면 저장할 수 없는 트리 상태(선택됨, 확장됨, 스크롤됨)가 있으므로 나중에 생각했습니다. 상태를 저장할 수 있는 연결 유지. 하지만 저는 vue의 단일 파일 구성 요소입니다.탭은 메인 페이지에 있습니다.트리는 가져오는 구성 요소입니다.가져오기가 들어오면 구성 요소 속성에 직접 등록됩니다.에 대해 여러 이름을 만들려면 어떻게 해야 하나요? 게시한 같은 나무?? 하지만 사실 저는 컴포넌트일 뿐입니다. 왼쪽 탭에만 연결하기 위해 이름을 만들었습니다. 더 정확하게는 왼쪽 탭 항목을 삭제하려면 keepalive에서 이 탭 항목에 해당하는 트리 버퍼도 삭제해야 합니까? 그러나 우리는 어떻게 해야 합니까?

@leixu2txtek 그 PR을 포기하고 강제로 캐시를 지워서 가장 동적으로 캐시 구성요소를 삭제하는 기능을 구현했습니다.

현재 사이트 전체에서 캐싱을 사용하고 있으며, 페이지 이탈의 라우팅 이벤트를 가로채서 비즈니스 로직에 따라 캐시를 삭제하는 기능을 구현하고 있습니다.다음 코드 스니펫은 참고용입니다.

• 라우터 보기를 연결 유지에 넣으면 전체 사이트가 기본적으로 캐시를 사용합니다.
  <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가 더 잘 나왔으면 하는 바램입니다.

그런데 이렇게 하면 메모리가 해제되지 않습니다. keepalive를 끄면 잘 됩니다. keepalive를 추가한 다음 수동으로 캐시를 제거하고 메모리를 파괴하는 것이 여전히 증가하고 있습니다. 이 부분에 주의를 기울이셨는지 궁금합니다.

@Liudapeng 메모리 사용량을 잘 공부한 적이 없어서 대략적인 테스트를

요즘 좀 바빠서 이틀 전에 당신의 메시지를 보고 답장을 보낼 시간이 없었어요.

페이지의 5~6개 수준으로 깊숙이 들어간 다음 홈 페이지로 돌아가기 위해 여러 번 반복하여 또 다른 테스트를 수행했습니다. 메모리 타임라인의 결과는 다음과 같습니다.

• 연결 유지를 켜고 구성 요소를 동적으로 파괴합니다(즉, 위에서 언급한 방법 사용).
  > 타임라인에서 메모리 드랍이 확실히 보이네요.. 메모리가 망가진거 같아요.
  

연결 유지를 사용하지 마십시오.

킵얼라이브가 없기 때문에 메모리 스택은 그다지 빠르지 않지만 계속해서 높아지고 있습니다(내 코드가 급하게 변경되고 다른 곳에서 메모리 누수가 있을 수 있음)

하지만 일반적으로 동적 소멸을 사용한 후에도 메모리 사용량은 여전히 ​​허용 가능한 범위 내에 있다고 생각하므로 메모리가 크게 증가하는 경우 구성 요소가 소멸될 때 바인딩 이벤트가 소멸되지 않는지 확인해야 합니다. 구성 요소는 keepAlive의 캐시 배열에서 제거되지만 메모리에서 삭제되지 않습니다.

다시 확인 해주세요.

@wanyaxing 내 프로젝트에 연결 유지 없이 동일한 문제가 있습니다.

동적 구성 요소의 $destory() 호출이 작동하지 않으며 노드 수가 많을수록 JS 힙이 높아진다는 것을 알았습니다. 동적 구성 요소가 DOM을 파괴하지 않고 생성한 것으로 보입니다.

@bigggge 이름은 경로의 속성이 아니라 구성 요소 내부의 속성입니다.

내 질문은 더 이상하다. 내 vue 버전은 2.3.3입니다. 페이지 A에는 다음 페이지를 로드하기 위해 스크롤하는 코드가 있습니다. 페이지 A에서 페이지 B로 전환했습니다. 페이지 B를 스크롤했을 때 페이지 A에서 다음 페이지를 로드하는 코드가 여전히 처형됩니다. 전역 연결 유지를 제거하면 위의 문제가 발생하지 않습니다. 그러나 활성화 된 모든 것이 다시 유효하지 않으므로 생성을 사용해야합니다.

내 질문은 더 이상하다. 내 vue 버전은 2.3.3입니다. 페이지 A에는 다음 페이지를 로드하기 위해 스크롤하는 코드가 있습니다. 페이지 A에서 페이지 B로 전환했습니다. 페이지 B를 스크롤했을 때 페이지 A에서 다음 페이지를 로드하는 코드가 여전히 처형됩니다. 전역 연결 유지를 제거하면 위의 문제가 발생하지 않습니다. 그러나 활성화 된 모든 것이 다시 유효하지 않으므로 생성을 사용해야합니다.

글로벌 모니터링으로 인한 것일 수 있으며, 스크롤 시 현재 경로인지 판단하고 다음 페이지 로드 여부를 결정할 수 있습니다.

내 질문은 더 이상하다. 내 vue 버전은 2.3.3입니다. 페이지 A에는 다음 페이지를 로드하기 위해 스크롤하는 코드가 있습니다. 페이지 A에서 페이지 B로 전환했습니다. 페이지 B를 스크롤했을 때 페이지 A에서 다음 페이지를 로드하는 코드가 여전히 처형됩니다. 전역 연결 유지를 제거하면 위의 문제가 발생하지 않습니다. 그러나 활성화 된 모든 것이 다시 유효하지 않으므로 생성을 사용해야합니다.

글로벌 모니터링으로 인한 것일 수 있으며, 스크롤 시 현재 경로인지 판단하고 다음 페이지 로드 여부를 결정할 수 있습니다.

예, vue-infinite-scroll 플러그인을 사용합니다.글로벌 연결 유지를 사용할 때 모니터링 이벤트가 제거되지 않습니다.이 플러그인을 다시 작성했습니다.

캐시 지우기 기능을 구현하기 위해 @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 당신은 3단계 라우팅 캐시에 효과적이지 않습니다.예를 들어 vue-element-admin에서 여러 3단계 태그 태그가 활성화된 경우 태그 태그를 전환하면 캐시 구성 요소가 파괴되지 않고 1/3만 열립니다. -레벨 라우팅 태그 태그. , 파괴될 수 있습니다. 예를 들어 다음 menu1-0 및 menu1-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에 도달했을 때 모든 캐시를 지우는 것이 불가능하다는 것을 알았습니다. vuex에 keep-alive의 최대 값을 넣고 1로 설정하는 것은 여전히 ​​유효하지 않습니다. vue 개발자 도구에 따라 캐시된 페이지가 여전히 있습니다.
나에게 더 이상한 것은 3에서 다른 비 로그인 페이지로 점프하면 1에서 캐시된 페이지의 마운트가 트리거되고 개발자 도구를 보면 이 페이지가 모두 비활성화된다는 것입니다. 이봐, 이것은 다른 페이지 로직으로 이어집니다. 문제의.
한참을 찾아도 난 아직도 이유를 모르겠어

비즈니스 측면에서 이러한 종류의 시나리오는 매우 시나리오여야 합니다.
1. 여러 페이지를 탐색했고 캐시해야 합니다.
2. 종료하려면 클릭하세요. 모든 캐시를 지워야 합니다.
3. 로그인 후 다른 오류 리디렉션 프롬프트가 있습니다. 이 페이지는 캐시되지 않습니다.
4. 로그인에 성공하고 새 페이지가 계속 캐시됩니다.

이제 2에 도달했을 때 모든 캐시를 지우는 것이 불가능하다는 것을 알았습니다. vuex에 keep-alive의 최대 값을 넣고 1로 설정하는 것은 여전히 ​​유효하지 않습니다. vue 개발자 도구에 따라 캐시된 페이지가 여전히 있습니다.
나에게 더 이상한 것은 3에서 다른 비 로그인 페이지로 점프하면 1에서 캐시된 페이지의 마운트가 트리거되고 개발자 도구를 보면 이 페이지가 모두 비활성화된다는 것입니다. 이봐, 이것은 다른 페이지 로직으로 이어집니다. 문제의.
한참을 찾아도 난 아직도 이유를 모르겠어

귀하의 시나리오에서 2시에 페이지를 직접 새로 고치는 것을 고려해야 합니다. 이것이 가장 안전하고 직접적인 솔루션입니다.

Include는 구성 요소의 이름에 해당하므로 여러 경로가 하나의 구성 요소에 해당하면 어떻게 될까요? 동일한 구성 요소에 다른 이름을 지정하는 방법이 있습니까?