【Vue + keep-alive】路由缓存

news/2024/5/22 4:38:31

一. 需求

列表页，n 条数据项可打开 n 个标签页，同时1条数据项的查看和编辑共用一个标签页。如下所示：

在这里插入图片描述
参考

// 主页面
// 解决因 路由缓存，导致 编辑后跳转到该页面 不能实时更新数据
onActivated(() => {getList()
})

二. 实现

2.1 查看/编辑返回主页面

实现（template模块）

<!-- 修改/查看页 -->
<template><div style="padding:20px"><el-form ref="formName" :model="form" :rules="formRules"  label-width="120px"><template v-if="type == '查看'"><el-form-item><el-col :span="12"><el-form-item label="联系人" prop="contactName"><span>{{ form.contactName }}</span></el-form-item></el-col><el-col :span="12"><el-form-item label="学历" prop="education"><span>{{ form.education}}</span></el-form-item></el-col></el-form-item><el-form-item><el-col :span="12"><el-form-item label="手机号" prop="phone"><span>{{ form.phone }}</span></el-form-item></el-col><el-col :span="12"><el-form-item label="邮箱" prop="email"><span>{{ form.email }}</span></el-form-item></el-col></el-form-item><template><template v-else><el-form-item><el-col :span="12"><el-form-item label="联系人" prop="contactName"><el-input v-model="form.contactName" placeholder="请输入联系人" maxlength="20" show-word-limit /></el-form-item></el-col><el-col :span="12"><el-form-item label="学历" prop="education"><el-input v-model="form.education" placeholder="请输入学历" maxlength="20" show-word-limit /></el-form-item></el-col></el-form-item><el-form-item><el-col :span="12"><el-form-item label="手机号" prop="phonenumber"><el-input v-model="form.phonenumber" placeholder="请输入手机号" maxlength="11" show-word-limit /></el-form-item></el-col><el-col :span="12"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" maxlength="20" show-word-limit /></el-form-item></el-col></el-form-item><template></el-form><div v-if="type == '修改'"><el-button @click="handleClick">取 消</el-button><el-button type="primary" @click="handleSubmit">确 认</el-button></div></div>
</template>

2.2 返回上一页（script 跳转方式）

修改成功/点击取消返回主页面

错误：打开新的标签页

/** 确认按钮 */
const submitForm = () => {proxy.$refs['formName'].validate(valid => {if (valid) {if (type.value === '修改') {// 调用接口update({ id: detailId, ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('修改成功')setTimeout(() => {// 返回上一页handleClick()}, 2000)}})}}})
}
/** 取消 返回到上一页，避免打开新的标签页 */
const handleClick = async() => {await router.push({ path: `/xxx` })
}

正确：不打开新标签页，返回原来的主页面

/** 确认按钮 */
const submitForm = () => {proxy.$refs['formName'].validate(valid => {if (valid) {if (type.value === '修改') {// 调用接口update({ id: detailId, ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('修改成功')setTimeout(() => {// 返回上一页handleClick()}, 2000)}})}}})
}
/** 取消 返回到上一页，避免打开新的标签页 */
const handleClick = () => {router.go(-1)
}

2.3 不同【修改/查看】标签页相互切换

期望

修改和查看的显示内容，不会因处在同一个页面互相影响。且在切换不同标签时，不会出现数据紊乱情况

实现

<script setup name="Detail">
const route = useRoute() // route.type 判断编辑还是查看
const type = ref('') // 编辑/查看
// 路由监听
watch(() => route.query.type,newValue => {type.value = newValue
},{deep: true, immediate: true}
)
</script>

问题

代码中限制了不能重复调用接口。所以在切换不同修改/查看标签页时一直提醒重复调用。

① 原因
路由缓存

<template><!-- vue3.0配置 --><router-view v-slot="{ Component }"><keep-alive>//  v-if="$route.meta.keepAlive"<component :is="Component" /></keep-alive></router-view> 
</template>

② 解决：清楚缓存

/**
* name:'',     // 路由名称
* query:'{"id","1","type":"编辑"}',
* meta:{
* 	keepAlive  // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false),
* 	icon:''    // 图标名称
* 	title:''   // 名称
* }
* /{path: "/Detail",name: "Detail",meta: {keepAlive: true // 设置页面是否需要使用缓存},component: () => import("@/views/xxx/Detail/index.vue")},