Vue JSコンポーネント再接続またはキャッシュ

Question

VueJSコンポーネントは、ナビゲーション後にキャッシュされたり、少なくとも再接続されません。リフレッシュまたは起動時に、すべてがアタッチされてレンダリングされますが、別のページに移動してから戻った後に表示されます。私の場合、最初のComponent - Carouselコンポーネントはレンダリングされませんが、API呼び出しが行われます。

<template> 
<div class="rel"> 
    <div id="homeCarousel" class="owl-carousel owl-slider"> 
     <div class="item" v-for="product in featured"> 
      <div class="bg-holder top-area-half" > 
       <div class="bg-mask-lighten"></div> 
       <img class="bg-img" v-bind:src="product.feature_image_url"> 
       <div class="hero-caption"> 
        <div class="container"> 
         <h3 class="hero-title">{{product.feature_title}}</h3> 
         <p class="hero-subtitle">{{product.feature_subtitle}}</p> 
         <a class="btn btn-white btn-ghost btn-lg hero-btn" href="#">Shop now</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="hero-slider-nav" class="hero-slider-nav"> 
     <div class="container"> 
      <div class="pull-right"></div> 
     </div> 
    </div> 
</div> 
</template> 
<style> 

</style> 
<script> 
export default{ 
    data(){ 
     return{ 
      featured:[] 
     } 
    }, 
    ready(){ 

    }, 
    mounted(){ 
     this.getFeaturedProducts(); 
    }, 
    components:{ 

    }, 
    methods: { 
     getFeaturedProducts: function() { 
      Vue.http.get('/api/product/filter/featured=1').then(
       (response) => { 
        this.featured = response.body; 
       } 
      ) 
     } 
    } 

} 
</script> 

`

<template> 
    <div class="global-wrapper clearfix "> 
     <keep-alive> 
      <Carousel></Carousel> 
     </keep-alive> 
//The rest of the code which is just importing the Component 

Answer 1

私は私が間違って何をしているのかが分かりました。私は別のJS/JQueryファイルを用意していました。文書の準備ができたら、フクロウカルーセルをid #('homeCarousel').owlCarousel({})で初期化しました。私はすでにブートストラップされたフクロウカルーセルを持っていたので、私は要素をターゲットにしていて、それをフクロウのカルーセルにしていました。