vue3 keep-alive 动态缓存页面
keep-alive通过keep-alive可以缓存页面,但是有的时候有这种需求:从首页进入列表页要刷新从详情页返回列表页不刷新基本思路通过vuex 保存需要缓存的列表页数组通过keep-alive 的 include 来动态获取vuex保存的数组代码实现app.vue<router-view v-slot="{ Component }"><!-- 缓存页面 --><
·
keep-alive
通过keep-alive可以缓存页面,但是有的时候有这种需求:
从首页进入列表页要刷新
从详情页返回列表页不刷新
基本思路
通过vuex 保存需要缓存的列表页数组
通过keep-alive 的 include 来动态获取vuex保存的数组
代码实现
app.vue
<router-view v-slot="{ Component }">
<!-- 缓存页面 -->
<keep-alive :include="$store.state.keepLiveRoute">
<component :is="Component" />
</keep-alive>
</router-view>
store->index.js
const keepLiveRoute = ["daily", "safe", "todo", "week", "work"];
export default createStore({
state: {
keepLiveRoute
},
mutations: {
ClearKeep(state) {
if (state.keepLiveRoute.length > 0) state.keepLiveRoute = [];
console.log("清空缓存路由!");
},
SetKeep(state) {
if (!state.keepLiveRoute.length > 0) state.keepLiveRoute = keepLiveRoute;
console.log("设置缓存路由!");
}
},
actions: {},
modules: {}
});
更多推荐
已为社区贡献23条内容
所有评论(0)