当前位置：首页 > wzjs >正文

网站建设服务哪便宜seo网站排名助手

wzjs 2025/8/14 8:17:56

网站建设服务哪便宜,seo网站排名助手,那个网站推作者,众筹网站怎么做页面有时候需要设置缓存，比如填写信息页面选择部门人员时跳转到组织架构页面，选择完毕之后返回信息填写页面，再次点击选人员页面需要保存之前已选的状态，但是在保存信息后需要将缓存状态清除，代码如下 1.在vuex中添加…

页面有时候需要设置缓存，比如填写信息页面选择部门人员时跳转到组织架构页面，选择完毕之后返回信息填写页面，再次点击选人员页面需要保存之前已选的状态，但是在保存信息后需要将缓存状态清除，代码如下

1.在vuex中添加路由缓存列表

在这里插入图片描述
代码如下

const state = {include: [], // 路由缓存列表
}
const mutations = {// 添加路由缓存SETINCLUDELIST(state, payload) {state.include.push(payload)},// 删除路由缓存REMOVEINCLUDELIST(state, payload) {let index = state.include.indexOf(payload)state.include.splice(index, 1)},// 清空缓存路由CLEARINCLUDELIST(state) {state.include = []},
}
const actions = {}
export default {namespaced: true,state,mutations,actions,
}

2.在App.vue文件里给 keep-alive 添加 include属性并且进行监听

在这里插入图片描述
代码如下

<template><div id="app"><!-- 一级路由出口 --><keep-alive :include="include"><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive></div>
</template>
<script>
import { mapState } from 'vuex'
export default {watch: {$route: {handler(to, from) {to.matched.forEach((item) => {// 需要缓存的页面 且 缓存列表里面没有当前页面的 执行缓存操作if (item.meta.keepAlive && !this.include.includes(item.name)) {this.$store.commit('app/SETINCLUDELIST', item.name)}})// 首页标签切换的时候 删除前一个页面的缓存if (to.path.includes('layout') &&from.path.includes('layout') &&this.include.includes(from.name)) {this.$store.commit('app/REMOVEINCLUDELIST', from.name)}},},},computed: {...mapState({include: (state) => state.app.include,}),},
}
</script>