一. 需求
列表页，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")
},
或
三. 知识点
- 路由跳转数据未实时更新，参考1，参考2
- 路由缓存，参考
- 退回到上一页
