vue3 表单搜索内容回显到地址栏

地址栏输入内容回显到form表单，同理表单输入内容也要回显到地址栏中

    
        
        
    
        
        
    
        
    
        

          
            重置
            查询
          
        
    

import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
let props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const data = ref({
  orchId: props.modelValue.orchId ?? "",
  taskId: props.modelValue.taskId ?? "",
  workflowId: props.modelValue.workflowId ?? "",
});
const route = useRoute();
const router = useRouter();
let emit = defineEmits(["search"]);
const handleReset = () => {
  resetForm(data.value);
  handleSearch();
};
const handleSearch = () => {
  router.push({ query: { ...route.query, ...data.value } });
  emit("search", data.value);
};
watchEffect(() => {
  data.value = {
    orchId: route.query.orchId || "",
    taskId: route.query.taskId || "",
    workflowId: route.query.workflowId || "",
  };
});