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

页面持久化（适用与单个页面，跳转页面不适用）：

步骤一：添加 keepAlive: true

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

步骤二：在需要持久化的页面使用 define Options 选择当前页， name 的名字就是当前页的路由名

defi neo ptions({
  name: "lookLucky"
});

页面跳转传参以及持久化-标签页名称配置

某些情况下，做标签页跳转时需要将当前页的某条信息的名称 或者 是状态携带到跳转页目标页，并且目标页刷新后数据还是存在，这就需要做页面的持久化以及hooks配置。

步骤一：先在路由页配置路由

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

步骤二：新增一个hooks.ts文件

import { u SEM ultiTags Store Hook }  From  "@/store/modules/multiTags";
import { useRouter, useRoute } f rom  "vue-router";
import { onBefore mount  } from "vue";
 export  function useDet ai l() {
  const route = useRoute();
  const router = useRouter();
  // 这里的id、crea test atus ，就是跳转页传入的，传入的参数需要一一对应
  const id = route.query?.id ? route.query?.id : route.params?.id;
  const create stat us = 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 ? "添加" : "修改"}福袋活动`   // 可以动态修改标签页名称
          },
          // 最大打开标签数
          dyn ami cLevel: 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 = () => {   //  点击事件 ，也可以直接写在HT ML 标签上
  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. current Route.value.path就是需要关闭的路由，固定写法，不要动
useMultiTagsStoreHook().handleTags(" splice ", router.currentRoute.value.path);

需要注意

如果配置了hooks的同时还配置了keepAlive: true，那么页面修改了之后，数据会持久保存，所以下次进入页面时还是当前状态，例如：数据清空，如果开启了keepAlive，当前页数据清空了，下次跳转进入时，还是清空的状态，不会重新刷新，如果需要重新刷新，需要关闭keepAlive。

到此这篇关于Pure admin-Router标签页配置与页面持久化实现方法详解的 文章 就介绍到这了,更多相关Pure admin-Router标签页配置内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

@H_ 406 _61@ 您可能感兴趣的文章: routeros admin忘记密码的解决方法 快速掌握Vue Router使用方法 Vue router配置与使用分析讲解 Vue3的vue-router超详细使用示例教程 Vue Router 实现登录后跳转到之前想要访问的页面

总结

以上是 为你收集整理的 Pure admin-Router标签页配置与页面持久化实现方法详解 全部内容，希望文章能够帮你解决 Pure admin-Router标签页配置与页面持久化实现方法详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Pure admin-Router标签页配置与页面持久化实现方法详解的详细内容...