前端经常出现新增与修改使用相同组件的情况, 目前为止, 发现最优的页面处理方式应该是这样的:
假设这里有一个文章新增与编辑页, 路由分别为article-add
与article-edit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<template></template>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const rouer = useRouter();
const formData: Ref<any> = ref();
const loading: Ref<boolean> = ref(false);
function resetFormData() {
formData.value = {
// 给formData设置默认值
};
}
async function getSomeInfo() {
if (!route.query.id) {
if (route.name == "article-add") {
// 这句是为了处理编辑模式时没有文章ID的情况, 可以直接跳转到列表页,或者自行处理
router.push({
name: "article-list",
});
}
resetFormData();
return;
}
try {
loading.value = true; // 如果页面有loading, 需要用到这个值
const res = await http.get();
console.log("getSomeInfo", res);
} catch (error) {
console.log("getSomeInfo", error);
resetFormData(); // 查询失败后,重置formData, 主要是为了避免直接切换其他的文章ID后查询文章错误, 如果没有这句, 页面会保留上一篇文章的内容
} finally {
loading.value = false;
}
}
watch(
() => route.query,
() => {
getSomeInfo(); // 这里主要监控文章ID发生变化的行为
}
);
watch(
() => route.name,
() => {
getSomeInfo(); // 这里主要监控从编辑页跳转到新增业的行为
}
);
onMounted(() => {
getSomeInfo();
});
</script>
|