Pure admin-Router标签页配置与页面持久化实现方法详解

{
      path: "/lucky/lookLucky",
      name: "lookLucky",
      component: () => import("@/views/lucky/lookLucky/index.vue"),
      meta: {
        title: $t("查看幸运活动"),
        showLink: false,
        keepAlive: true   // 添加 keepAlive: true   
      }
    }

defineOptions({
  name: "lookLucky"
});

{
      path: "/lucky/luckyEvent/EditBag",
      name: "EditBagEvent",
      component: () =>
        import("@/views/lucky/luckyEvent/EditBag/index.vue"),
      meta: {
        title: $t("幸运活动编辑"),
        showLink: false,  // 不在左侧菜单显示
      }
    }

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter, useRoute } from "vue-router";
import { onBeforeMount } from "vue";
export function useDetail() {
  const route = useRoute();
  const router = useRouter();
  // 这里的id、createStatus ，就是跳转页传入的，传入的参数需要一一对应
  const id = route.query?.id ? route.query?.id : route.params?.id;
  const createStatus = route.query?.createStatus
    ? route.query?.createStatus
    : route.params?.createStatus;
  function toDetail(
    // 这里的id、createStatus ，就是跳转页传入的，传入的参数需要一一对应
    createStatus: number | string | string[] | number[] | null,
    model: string,
    id?: number | string | string[] | number[] | null
  ) {
    if (model === "query") {
      // 保存信息到标签页
      useMultiTagsStoreHook().handleTags("push", {
          // 跳转目标页的路由
        path: `/lucky/luckyEvent/EditBag`,
        name: "EditBagEvent",   // 跳转目标页的路由名
        query: { id: String(id), createStatus: String(createStatus) },   // 跳转目标页的参数
        meta: {
          title: {
            zh: `${createStatus == 1 ? "添加" : "修改"}福袋活动`,  // 可以动态修改标签页名称
            en: `${createStatus == 1 ? "添加" : "修改"}福袋活动`   // 可以动态修改标签页名称
          },
          // 最大打开标签数
          dynamicLevel: 1
        }
      });
      // 路由跳转，EditBagEvent 携带参数
      router.push({
        name: "EditBagEvent",
        query: { id: String(id), createStatus: String(createStatus) }
      });
    }
  }
  function initToDetail(model) {
    onBeforeMount(() => {
        // 这里的id、createStatus ，就是跳转页传入的，传入的参数需要一一对应
      if (id) toDetail(createStatus as string, model, id as string);
    });
  }
  return { toDetail, initToDetail, id, createStatus, router };  // 导出参数，跳转目标页可以获取到
}

// 引入hooks文件
import { useDetail } from "./hooks";
// 当前页的路由名
defineOptions({
  name: "luckyBagEvent"
});
const { toDetail } = useDetail();
// 添加
const createStatus = ref(0); // 0修改 1创建
const addBagEvent = () => {   // 点击事件，也可以直接写在HTML标签上
  createStatus.value = 1;
  toDetail(createStatus.value, "query");  // 跳转（参数，query模式）
};

// 引入 hooks
import { useDetail } from "../hooks";
// 设置当前页的路由名
defineOptions({
  name: "EditBag"
});
// 获取路由参数以及方法
const { initToDetail, id, createStatus, router } = useDetail();
initToDetail("query");  // query传参方式
// 这里的initToDetail为回传的路由，用作路由的参数缓存以及页面持久

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useDetail } from "../hooks";
const { router } = useDetail();
router.push("/luckyModul/luckyBag"); // 路由跳转
// 关闭标签页，router.currentRoute.value.path就是需要关闭的路由，固定写法，不要动
useMultiTagsStoreHook().handleTags("splice", router.currentRoute.value.path);