vue keep-alive的页面缓存问题

最新推荐文章于 2023-10-18 15:49:26 发布

言木土

最新推荐文章于 2023-10-18 15:49:26 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： html5 javascript vue.js npm 前端

本文链接：https://blog.youkuaiyun.com/xlk_1996/article/details/118723949

Vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了一种在Vue.js应用中处理页面缓存的方法，特别是在A-B-C页面导航流程中。当从A到B时，B页面不缓存并获取最新数据，而从B到C时，B页面会被缓存。通过使用Vuex进行状态管理，并结合`keep-alive`组件的`exclude`属性，实现了动态控制页面是否缓存的逻辑。在`beforeRouteEnter`和`beforeRouteLeave`钩子函数中，根据路由变化更新缓存策略。这种方法可以帮助开发者更灵活地管理页面的缓存行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在写代码的时候，遇到这样一种情况就是：A页面->B页面->C页面。A页面->B页面时，B页面获取最新数据（不缓存）；B页面->C页面，B页面缓存。发现问题第一时间想到的就是百度大法，但是百度来百度去，都找不到一个好办法，直到遇到这篇文章完美解决vue keep-alive页面缓存问题给了我启发。再次发动另一个技能CV大法，最后发现里面的代码还是不太符合我的需求，然后就稍微修改了一下，顺便做个记录。下面直接贴代码了。。。

页面A

<template>
  <div>
    我是页面A
  </div>
</template>

<script>
export default {
  name: "PageA",//这里要写
  data() {
    return {
    };
  },
};
</script>

<style scoped>
</style>

页面B（相信大家看完代码之后，发现主要是在页面B做判断）

<template>
  <div id="daily-schedule">
    页面B
    <input type="text"/>
  </div>
</template>

<script>
export default {
  name: "PageB",//这里要写
  data() {
    return {
    };
  },
  beforeRouteEnter (to, from, next) {
    if (from.path === "/PageA") {
      next((vm) => {
        vm.$store.commit("delcachePageName", to.name);
      });
    } else {
      next();
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === "/PageA") {
      this.$store.commit('addcachePageName', from.name)
    } 
    next();
  },
};
</script>

<style scoped>
</style>

页面C

<template>
  <div>
  页面C
  </div>
</template>

<script>
export default {
  name: "PageC",
  data() {
    return {
    };
  },
};
</script>

<style scoped>
</style>

store.js，需要安装vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
   //state 存放数据
    state: {
        cachePageName:'', //不缓存组件名称
    },
    // mutations 改变数据定义方法
    mutations: {
        //重置缓存组件名称
	    resetcachePageName(state, res){
	        state.cachePageName = res;
	    },
        //添加缓存组件名称
		addcachePageName(state, res){
		    if(state.cachePageName == ''){
		        state.cachePageName = res;
		    }else{
		        let arr = state.cachePageName.split(',');
		        if (res && typeof res === 'string') {
		            let i = arr.indexOf(res);
		            if (i <= -1) {
		                state.cachePageName = state.cachePageName+','+res;
		            }
		        }
		    }
		},
        //删除缓存组件名称
		delcachePageName(state, res){
		    let arr = state.cachePageName.split(',');
		    if (res && typeof res === 'string') {
		      let i = arr.indexOf(res);
		      if (i > -1) {
		          arr.splice(i, 1);
		          state.cachePageName = arr.join();
		      }
		    }
		}
    },
    getters: {
        getCachePageName(state){
            return state.cachePageName;
        }
    }

})

export default store

App.vue

<template>
	<div id="app">
		<keep-alive :exclude="cachePageName">
		    <router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
			};
		},
		computed: {
			cachePageName(){
		        return this.$store.getters.getCachePageName;
		    }
		},
	}
</script>

<style>
</style>