Vue 라우터는 keep-alive를 사용하여 특정 구성 요소를 캐시하시겠습니까?

Vue 라우터는 keep-alive를 사용하여 특정 구성 요소를 캐시하시겠습니까?

나는 최근에 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/#/http://b2750916.ngrok.io/

여기에서 답변을 확인하십시오. https://forum.vuejs.org/t/keep-alive-specific-component/2372/2

v2.1 캐싱할 구성 요소를 제어하기 위해 regex로 "include" 및 "exclude" 속성을 사용할 수 있다.이러한 속성은 v-ded일 수도 있다: https://vuejs.org/v2/api/#keep-properties

또 다른 방법은 다음과 같은 방법을 사용하는 것이다.deactivated캐시하지 않을 구성요소를 연결하십시오.낚싯바늘에서, 당신은 전화한다.this.$destroy();사용하지 않을 때 캐쉬에 있는 구성요소를 제거한다.

그리고 이게 도움이 될 수도 있지?https://github.com/LinusBorg/portal-vue

포털-뷰가 작동할지 확실하지 않지만, 내 생각은 비디오를 외부에 배치하여 (루트 구성 요소에 배치된 "포털"로) 독립적으로 렌더링하고 "포털-타겟"을 사용하여 원하는 곳에 표시되도록 하는 것이다.

참조URL: https://stackoverflow.com/questions/47560502/vue-router-use-keep-alive-to-cache-certain-components