页面持久化（适用与单个页面，跳转页面不适用）：
步骤一：添加 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标签页配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
