Vue JS 组件重新附加或缓存

Posted 2023-02-23

【中文标题】Vue JS 组件重新附加或缓存

【英文标题】：Vue JS Component reattach or Cache

【发布时间】：2017-04-26 19:49:23

【问题描述】：

VueJS 组件在导航后不会被缓存或至少重新附加。在刷新或启动时，所有内容都会被附加并呈现良好，但在导航到另一个页面后又返回。第一个组件 - 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

【问题讨论】：

您是否尝试不使用keep-alive 选项？如果它渲染一次并且不再渲染，那么很可能是keep-alive

的问题

我试过没有它，但导航回来时它不会呈现

然后您需要使用vue-cli 检查this.featured 的值，以确保它具有您期望的产品数组。如果数组长度为零，那么您将看不到任何显示内容，尽管组件可能会被渲染。

第一次访问页面时，网络选项卡显示作为响应，组件获得了应有的对象数组。导航到另一个页面并返回，第二次发出请求并获得一组对象。所以没有“缺乏数据原因”不渲染。另外，即使它第二次没有获取数据，至少它会在 dom 检查器上显示 v-for 迭代周围的父元素

是的，即使没有数据，您也应该能够在 DOM 检查器中看到父元素。这似乎是路由器配置的问题。您的 Carousel 组件看起来不错。你能在 jsFiddle 中重新创建这个 bug 以便我们看看吗？

【参考方案1】：

我发现我做错了什么。我有一个单独的 JS/JQuery 文件，在准备好的文档上，我正在初始化一个 id #('homeCarousel').owlCarousel() 的猫头鹰轮播。有效的是，因为我已经引导了 owl carousel -> 在挂载的生命周期回调中，我现在将元素作为目标并将其设为 owl carousel。