minnan-website/composeable/PageAction.ts

import { EventBus } from "@/common/EventBus";
import { onBeforeUnmount, onMounted, type App } from "vue";
import { useRoute, useRouter, type LocationQueryRaw } from "vue-router";

/**
 * 说明：页面导航相关函数封装。
 */

type OnPageBackCb = (data: Record<string, unknown>) => 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<string, unknown>) {
    callPrevOnPageBack('' + router.options.history.state.back, data);
    router.back();
  }
  /**
   * 页面跳转: 跳转到指定页面
   * @param url 页面路径
   * @param data 要传递的数据
   */
  function navTo(url: string, data: Record<string, unknown> = {}) {
    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<string, unknown>) {
    EventBus.emit(EventBusName, {
      name,
      data,
    })
  }
  /**
   * 页面跳转: 调用上一个页面的 onPageBack 方法并返回至上一个页面
   * @param name 方法名
   * @param data 要传递的数据
   */
  function backAndCallOnPageBack(name: string, data: Record<string, unknown>) {
    router.back();
    callPrevOnPageBack(name, data);
  }
 
  return {
    back,
    backReturnData,
    backAndCallOnPageBack, 
    navTo,
    callPrevOnPageBack,
  }
}