Vue3 路由查询参数更新后,执行更新方法
import { ref, defineComponent, watch,getCurrentInstance } from "vue"; import { useRoute } from 'vue-router'; export default defineComponent({ setup() { const table = ref({ key: 'spec_id', footer: "Foots", cnName: '', name: '', url: "//", sortName: "" }); const editFormFields = ref({}); const editFormOptions = ref([]); const searchFormFields = ref({ "goods_no": "", "goods_name": "" }); const searchFormOptions = ref([[]]); const columns = ref([]); const detail = ref({ cnName: "#detailCnName", table: "#detailTable", columns: [], sortName: "", key: "" }); const route = useRoute(); const instance = getCurrentInstance(); watch( () => route.query, (newQuery, oldQuery) => { // 当查询参数发生变化时执行相应的逻辑 instance.refs.grid.refresh(); // 在这里可以根据新的查询参数进行相应的处理 } ); return { table, extend, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, }; }, }); </script>