Vue 라우터는 특정 구성 요소를 캐시에 보관합니까?

나는 최근에 vue로 작업을 시작했고, 간단한 페이지를 만들었지 만로드 된 구성 요소가 캐싱되지 않는다는 것을 알아 냈습니다. 예를 들어 아래 링크 (예 : 내가 작업하고있는 것입니다)에서 youtube 비디오 로드에 시간이 걸리며 다른 링크를 클릭하여 비디오로 돌아 오면 다시로드됩니다.Vue 라우터는 특정 구성 요소를 캐시에 보관합니까?

구성 요소를 캐시하는 데 사용할 수 있습니까? 바람직하게는 그들 모두 대신 한 다음

1 씩 내 VUE의 :

import VueRouter from 'vue-router'; 
import Create from '../components/homepage/create.vue'; 
import How from '../components/homepage/how.vue'; 
import About from '../components/homepage/about.vue'; 
import Youtube from '../components/homepage/youtube.vue'; 
import Navigation from '../components/homeNavigation.vue'; 
import Login from '../components/auth/login.vue'; 
import Register from '../components/auth/register.vue'; 


const routes = [ 
    { path: '/create', component: Create }, 
    { path: '/how', component: How }, 
    { path: '/about', component: About}, 
    { name: 'youtube', path: '/youtube', component: Youtube}, 
    { path: '/login', component: Login}, 
    { path: '/register', component: Register}, 
]; 

Vue.use(VueRouter); 
Vue.component('navigation', Navigation); 

const router = new VueRouter({ 
    routes, 
}); 

new Vue({ 
    el: '#app', 
    router, 
    updated: function() { 
     Pace.restart() 
    }, 
    mounted: function() { 
     Pace.restart() 
    } 
});

보기 :

<div id="app"> 
     <navigation></navigation> 
      <transition appear name="slide-fade" mode="in-out"> 
       <keep-alive include='youtube'> 
        <router-view></router-view> 
       </keep-alive> 
      </transition> 
</div>

내 애플 :

http://b2750916.ngrok.io/#/youtube

출처

2017-11-29 Przemek

해결할 수 있을지 모르겠지만 [v-once] (https://vuejs.org/v2/api/#v-once) 지시문 – Thomasleveil

을 시도해 보셨습니까? 동영상 (아마 "iframe 화 된 것") 이외의 것으로 연결 유지는 구성 요소 데이터를 캐시해야하기 때문입니다. 그러나 데이터에 의하면 YT 비디오가 ... 더 자세한 정보를 얻을 수 있습니까? youtube 구성 요소는 무엇을합니까? – nettutvikler

Youtube 구성 요소의 이름 속성이 'youtube'와 같습니까? https : //stackoverflow.com/questions/43116616/keep-alive-on-a-single-route-instaead-of-all-routes-in-router -view/43131202 # 43131202 –

확인 여기이 답변 : https://forum.vuejs.org/t/keep-alive-specific-component/2372/2

v2.1 이후 "포함"및 "제외"속성을 캐시 할 구성 요소를 제어하기위한 정규식으로 사용할 수 있습니다. 이러한 특성은 또한 V가-bind'ed 될 수 있습니다 https://vuejs.org/v2/api/#keep-alive

또 다른 방법은 캐시를 유지하지 않을 구성 요소에 deactivated 후크를 사용하는 것입니다. 후크에서는 사용하지 않을 때 캐시 아래의 구성 요소를 제거하는 this.$destroy();으로 전화합니다.

또한이 방법이 도움이 될 수 있습니까? https://github.com/LinusBorg/portal-vue

portal-vue가 작동하는지는 확실하지 않지만 루트 구성 요소에있는 "포털"에서 독립적으로 렌더링되도록 비디오를 외부에 배치하고 " 포털 - 대상 ".

출처

2018-03-03 02:39:24 Isometriq

Vue 라우터는 특정 구성 요소를 캐시에 보관합니까?

답변

관련 문제