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模式）}
    ;
    

跳转目标页

// 引入 hooksimport {
 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标签页配置内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• routeros admin忘记密码的解决方法
• 快速掌握Vue Router使用方法
• Vue router配置与使用分析讲解
• Vue3的vue-router超详细使用示例教程
• Vue Router 实现登录后跳转到之前想要访问的页面

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！