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

Vue.js

JavaScript ASP.NET PHP编程正则表达式 AJAX相关 ASP编程 JSP编程编程10000问 CSS/HTML Flex 脚本加解密 web2.0 XML/RSS 网页编辑器相关技巧安全相关网页播放器 Dart Vue.js

上一篇: element-ui table使用type=&apo... 下一篇:Vant2移动端Vue组件库问题记录

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

发布时间：2023-03-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Pure admin-Router标签页配置与页面持久化实现方法详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

步骤一：添加 keepAlive: true

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

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

defineoptions({
  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 { 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);

需要注意

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

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

您可能感兴趣的文章: