vue中，使用keep-alive实现页面动态缓存

最新推荐文章于 2024-04-13 11:29:57 发布

July++

最新推荐文章于 2024-04-13 11:29:57 发布

阅读量893

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_41056945/article/details/107489139

版权

本文介绍了如何在Vue项目中利用keep-alive组件和Vuex结合路由守卫来实现特定条件下的页面缓存。当从A页面跳转到B页面并刷新，或者从B页面跳转到C页面再返回时，B页面的缓存策略会根据入口不同进行处理，确保用户体验。详细实现步骤包括在App.vue、Vuex中以及需要缓存的页面中的配置和路由钩子函数的使用。

摘要由CSDN通过智能技术生成

A页面->B页面，B页面刷新 B页面->C页面再返回至B页面，B页面缓存不刷新

最近项目遇到如上所述这个需求，一看到页面缓存，那必不可少要使用keep-alive,但是这里的页面缓存是有条件的，同一个页面，从不同的入口进来，是有不同的缓存需求的。我们使用vuex结合路由守卫可以达到此效果，下面来看看怎么完美实现这个需求吧……
1.App.vue

<template>
  <div id="app">
		<keep-alive :include="KEEPALIVES">
			<router-view />
		</keep-alive>
  </div>
</template>
<script>
import {
   mapGetters} from "vue