import { EventBus } from "@/common/EventBus"; import { onBeforeUnmount, onMounted, type App } from "vue"; import { useRoute, useRouter, type LocationQueryRaw } from "vue-router"; /** * 说明:页面导航相关函数封装。 */ type OnPageBackCb = (data: Record) => void const EventBusName = 'pageActionListenOnPageBack'; export function useOnPageBack() { const route = useRoute(); const cbs : OnPageBackCb[] = [] function onPageBack(cb: OnPageBackCb) { cbs.push(cb) } onMounted(() => { EventBus.on(EventBusName, (e) => { if (e.name === route.name) { cbs.forEach((cb) => { cb(e.data); }) } }); }); onBeforeUnmount(() => { EventBus.off(EventBusName); }); return { onPageBack, } } export function usePageAction() { const router = useRouter(); /** * 页面跳转: 后退至上一个页面。 */ function back() { router.back(); } /** * 页面跳转: 后退并返回数据至上一个页面的 onPageBack 方法。 * @param data 要返回的数据 */ function backReturnData(data: Record) { callPrevOnPageBack('' + router.options.history.state.back, data); router.back(); } /** * 页面跳转: 跳转到指定页面 * @param url 页面路径 * @param data 要传递的数据 */ function navTo(url: string, data: Record = {}) { const data2 : LocationQueryRaw = {} for (const key in data) { if (Object.prototype.hasOwnProperty.call(data, key)) data2[key] = data[key] as string; } router.push({ path: url, query: data2, }); } /** * 页面数据传递: 调用上一个页面的 onPageBack 方法 * @param name 方法名 * @param data 要传递的数据 */ function callPrevOnPageBack(name: string, data: Record) { EventBus.emit(EventBusName, { name, data, }) } /** * 页面跳转: 调用上一个页面的 onPageBack 方法并返回至上一个页面 * @param name 方法名 * @param data 要传递的数据 */ function backAndCallOnPageBack(name: string, data: Record) { router.back(); callPrevOnPageBack(name, data); } return { back, backReturnData, backAndCallOnPageBack, navTo, callPrevOnPageBack, } }