vue--页面缓存

最新推荐文章于 2024-07-24 00:05:24 发布

wind~lala

最新推荐文章于 2024-07-24 00:05:24 发布

阅读量231

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42768220/article/details/117200197

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

很多时候，为了让提高用户的体验感，在页面上添加缓存，是十分有必要的，
本文转载自：https://www.cnblogs.com/smart-girl/p/10496769.html

通过组件<keep-alive></keep-alive>来进行页面数据的缓存

<keep-alive>
	<router-view></router-view>
</keep-alive>

//可以通过路由中的参数来判断是否给页面添加缓存

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>


{      
    path: '/list',  
    name: 'List',      
    component: resolve => require(['@/pages/list'], resolve),    
    meta: {        
        isUseCache: false,  // 这个字段的意思稍后再说      
        keepAlive: true  // 通过此字段判断是否需要缓存当前组件  
    }    
},

//isUseCache
// list组价的activated钩子
 activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是我们获取数据的函数
    } 
},

// 详情页面的beforeRouteLeave钩子函数
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        to.meta.isUseCache = true;    
    }        
    next();
},