(共566篇)
全部分类

vue表单页最优构建方式
[ Vue(2+3) ] 

前端经常出现新增与修改使用相同组件的情况, 目前为止, 发现最优的页面处理方式应该是这样的:

假设这里有一个文章新增与编辑页, 路由分别为article-addarticle-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>