【Vue + keep-alive】路由缓存

一. 需求

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

在这里插入图片描述
参考

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

二. 实现

2.1 查看/编辑 返回 主页面

  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 跳转方式)

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

  1. 错误:打开新的标签页
    在这里插入图片描述
/** 确认按钮 */
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` })
}
  1. 正确:不打开新标签页,返回原来的主页面
    在这里插入图片描述
/** 确认按钮 */
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 不同 【修改/查看】标签页相互切换

  1. 期望

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

  1. 实现
<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>
  1. 问题

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

  ① 原因
  路由缓存

<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. 路由跳转数据未实时更新,参考1参考2
  2. 路由缓存,参考
  3. 退回到上一页
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值